Question

我有一个使用新的多重属性的上传表单，我制作了一个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）到{{1元素：

.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);的值根据您在循环中的位置而准确，所以您还需要使用闭包。所以你的代码最终看起来像：

虽然上面的示例肯定是一个选项，但它可能会发送更多内容来存储对新插入元素的引用，而不必处理新的$('#File').change(function(event) { for(I = 0; I < this.files.length; I++) { (function (I) { // Your current code inside the for loop })(I); } });和class，然后以后再用。

以下是我使用的最终代码：

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

如何选择前置元素

1 个答案: