2つ以上のファイルをアップロードするときに進行中のバー

Question

こんにちは私は2つ以上のファイルをアップロードしようとしていますが、私の問題はプログレスバーが小さいファイルが最初にアップロードされ、大きなファイルの..私の質問は、私は多くのファイルがアップロードされている場合私は同じ進歩を持つことができますか？私が気づい

$('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

[OK]を、最初の事はあなたの$ .each内の「データ」変数にファイルを追加しているということです...しかし、それは最初のPOSTは、最初の画像が含まれていることを意味、第2のポストは含まれてい最初と2番目のように。 、

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

は、[OK]を、ので、あなたの問題を解決するために：何かを送信する前に、それらを介して行くと、そのサイズを合計私はあなたの$ .each内部のこの部分はすべきだと思います。また、個々のファイルの進行状況を保存する必要があるので、ゼロとして、それを起動します：

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.totalSizeでevent.positionを比較し、あなたがこの位置を保存しますあなたの '読み込まれた'配列では、すべての配列を合計し、それをあなたの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); 

;）