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); 
     } 
} 

的，其結果是進步唯一無二的最後上傳進度DIV作爲導致進展如癡如狂（相似進展）。任何想法如何解決它？

Answer 1

這是因爲你的上傳進度是異步的，你的變量'i'是同步遞增的。因此，當您上傳第一個文件時，'i'的值已經等於文件總數的長度。

你或許可以通過沿該指數通過與呼叫ajaxloopreq修復：

ajaxloopreq(formata, i); 

並用它來找到正確的股利。