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

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。