如何选择前置元素

Question

我有一个使用新的 multiple 属性的上传表单，我制作了一个 ajax 上传表单以使事情更加用户友好。我的问题是我试图更新所有这些正在上传并附加到 div 的文件的百分比，而不是更新一个百分比，所有这些文件都是从最后一个文件更新的。这是一些代码。

$('#File').change(function(event) {
        for(I = 0; I < this.files.length; I++)
        {
            var Name = this.files[I].name;
            var Size = this.files[I].size;
            var Type = this.files[I].type;

            $('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>');
            var Data = new FormData();
            Data.append('File[]', this.files[I]);
            var Request = new XMLHttpRequest();
            Request.upload.addEventListener('progress', function(event){
                if(event.lengthComputable)
                {
                    var Percent = event.loaded / event.total;
                    var Progress = $('#UploadContent').find('.UploadPercent');
                    $(Progress).text(Math.round(Percent * 100) + '%');
                }
            });
            Request.upload.addEventListener('load', function(event) {
        });

            Request.open('POST', '/Home/Upload/Upload.php');
            Request.setRequestHeader('Chache-Control', 'no-cache');
            Request.send(Data);
            $('#UploadModal').fadeIn('fast');
        }
    });

现在你可以在进度监听器中看到我的

var progress = $('#UploadContent').find('.UploadPercent'); 

我将如何选择应该正确更新的文件。如果有人能找到一种完全不同的方法来改变百分比，那也太好了！ - 谢谢！

Answer 1

当你在前面添加一个新的、特定的class（是的，你可以使用id，但我会坚持使用class）到.UploadPercent元素：

$('#UploadContent').prepend('<div class="UploadLabel" style="width:60%;">'+Name+'</div><div class="UploadLabel UploadPercent UploadTarget' + I + '" style="width:10%;">0%</div><div class="UploadLabel" style="width:15%;">N/A</div><div class="UploadLabel" style="width:15%;">'+Type+'</div>');
// LOOK HERE----------------------------------------------------------------------------------------------------------------------^ HERE

当你定位时，使用这个：

var progress = $('#UploadContent').find('.UploadTarget' + I);

因为您需要 I 的值根据您在循环中的位置准确无误，所以您还需要使用闭包。所以你的代码最终看起来像：

$('#File').change(function(event) {
    for(I = 0; I < this.files.length; I++) {
        (function (I) {
            // Your current code inside the for loop
        })(I);
    }
});

虽然上面的示例绝对是一个选项，但它可能会发送更多内容来存储对新插入元素的引用，而不必处理新的class 和I，然后再使用它。

这是我要使用的最终代码：

http://jsfiddle.net/MeL7L/2/

$("#File").on("change", function (event) {
    for (var i = 0; i < this.files.length; i++) {
        (function (curFile, i) {
            var Name = curFile.files[i].name;
            var Size = curFile.files[i].size;
            var Type = curFile.files[i].type;

            var newEl = "";
            newEl += '<div class="UploadLabel" style="width:60%;">' + Name + '</div>';
            newEl += '<div class="UploadLabel UploadPercent" style="width:10%;">0%</div>';
            newEl += '<div class="UploadLabel" style="width:15%;">N/A</div>';
            newEl += '<div class="UploadLabel" style="width:15%;">' + Type + '</div>';
            newEl = $(newEl);
            $("#UploadContent").prepend(newEl);
            var Data = new FormData();
            Data.append("File[]", curFile.files[i]);
            var Request = new XMLHttpRequest();
            Request.upload.addEventListener("progress", function (event){
                if (event.lengthComputable) {
                    var Percent = event.loaded / event.total;
                    var Progress = newEl.find(".UploadPercent");
                    Progress.text(Math.round(Percent * 100) + "%");
                }
            });
            Request.upload.addEventListener("load", function(event) {});

            Request.open("POST", "/Home/Upload/Upload.php");
            Request.setRequestHeader("Cache-Control", "no-cache");
            Request.send(Data);
            $("#UploadModal").fadeIn("fast");
        })(this, i);
    }
});