Progress bar в ajax при загрузке 2 файлов и более

Question

Привет, я пытаюсь загрузить файл 2 или более, моя проблема заключается в том, что мой индикатор выполнения скажет 100% из-за того, что сначала загружен небольшой файл, а затем возвращается к проценту большого файла. Мой вопрос: как я могу добиться такого же прогресса, если у меня будет загружено много файлов?

$('body').on('change', 'input:file.gallery_images', function(event) 
{ 
    event.preventDefault(); 

    var data = new FormData(); 
    data.append('id', $("#id").val()); 

    var count = $(this)[0].files.length; 

    $.each($(this)[0].files, function(i, file) 
    { 
     data.append('userfile', file); 

     $.ajax(
     { 
      type: "POST", 
      url: href+path+"/imagens/store", 
      data: data, 
      mimeType: 'multipart/form-data', 
      contentType: false, 
      cache: false, 
      processData: false, 
      dataType: "json", 
      xhr: function() 
      { 
       var _xhr = $.ajaxSettings.xhr(); 

       _xhr.addEventListener('progress', function (event) { }, false); 

       if (_xhr.upload) 
       { 
        _xhr.upload.onprogress = function(event) 
        { 
         var percent = 0; 
         if (event.lengthComputable) 
         { 
          var position = event.position || event.loaded; 
          var total = event.totalSize || event.total; 
          percent = Math.ceil(position/total * 100); 
         } 
         $("#progress-bar").width(percent + '%'); 

        }; 
       } 
       return _xhr; 
      }, 
      beforeSend: function() 
      { 
       $("#progress").fadeIn('slow'); 
       $("#progress-bar").width('0%'); 
      }, 
      success: function(data) 
      { 
       if(data.gallery) 
       { 
        if($(".alert").length > 0) 
        { 
         $(".alert").hide('slow').remove(); 
         $("#droppable").show('slow'); 
        } 
        $('.gallery').fadeTo('300', '0.5', function() { 
         $(this).html($(this).html() + data.gallery).fadeTo('300', '1'); 
        }); 
       } 
       $("#progress").fadeOut('slow'); 
      } 
     }); 

    }); 
}); 

Answer 1

Хорошо, первая вещь, которую я заметил, что вы добавляете файл в переменную «данные» внутри вашего $ .each ... но это означает, что первый пост содержит первый образ, второй POST содержит первый и второй, и так далее. Я думаю, вы должны это часть внутри $ .each:

var data = new FormData(); 
data.append('id', $("#id").val()); 

Хорошо, так, чтобы решить вашу проблему: Прежде чем отправлять что-либо, пройти через них и суммировать их размер. Кроме того, вы должны сохранить прогресс для каждого файла в отдельности, так что начать его как ноль:

var sumTotal = 0; 
var loaded = []; 
for (var i = 0, list = $(this)[0].files; i < list.length; i++) { 
    sumTotal += list[i].size; 
    loaded[i] = 0; 
} 

Внутри вашего OnProgress, вместо сравнения event.position с event.totalSize, вы будете хранить эту позицию на вашем «загруженном» массиве, суммируйте весь свой массив, а затем сравните его с суммой.

loaded[i] = event.position || event.loaded; 
var sumLoaded = 0; 
for (var j = 0; j < loaded.length; j++) sumLoaded += loaded[j]; 
percent = Math.ceil(sumLoaded * 100/sumTotal); 

;)