Question

我需要上传多个文件，但每次都是异步的，并显示每个文件的进度。对于每个文件，我根据列表索引使用具有类名的单独进度条（即uploadprogress0，uploadprogress1），我的代码是这样的：

   var i=0
   var formData = new FormData();               
   formData.append('files[]', toUpload[i]);
   ajaxloopreq(formData);
   var ajaxloopreq = function (formData) {
         $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = e.loaded / e.total;
                        elem.find('.uploadprogress' + i).css({
                            width: percentComplete * 100 + '%'
                        });
                    }
                }, false);
                return xhr;
            },
            async: true,
            type: 'POST',
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            url: '',
            success:function(data){
                //do something
               }
        })
        i++;
        if (i <toUpload.length) {
            var formData = new FormData();               
            formData.append('files[]', toUpload[i]);
            ajaxloopreq(formData);
        } 
}

结果是进度仅在最后一个uploadprogress div中进行，因此进度变得疯狂（并行进展）。知道怎么解决吗？

Answer 1

这是因为您的上传进度是异步的，而变量'i'是递增的同步。因此，当您上传第一个文件时，“i”的值已经等于文件总量的长度。

您可以通过调用ajaxloopreq传递索引来修复它：

ajaxloopreq(formata, i);

并使用它来找到正确的div。

jquery多个ajax文件上传循环异步与多个进度条

1 个答案: