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

我注意到

好吧，第一件事就是要添加的文件到您的$。每个里面的“数据”变量...但是这意味着后的第一个包含第一个图像，第二个帖子包含第一个和第二个，等等。我想你应该这部分内容$。每个里面：

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

好了，所以，解决你的问题：发送任何数据之前，通过他们去，总结它们的大小。你还需要存储每个单独的文件中的进度，因此启动它是0：

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'数组上，对所有数组进行求和，然后将它与sumTotal进行比较。

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

;）