jquery multiple ajax file upload loop async with multiple progressbar

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.