上次文件進度達到100％和停止/完成事件之間的巨大差距？

Question

我正在使用blueimp File Upload plugin來實現一些文件上傳功能，我注意到，當我的上一個文件進度條達到100％時，以及停止和完成事件發生時，可能會有很大的時間間隔。我有以下代碼：

 $('#fileupload').fileupload({ 
      dataType: 'json', 
      progress: function (e, data) { 
       var progress = parseInt(data.loaded/data.total * 100, 10); 
       var bar = data.context.children().children(".progress"); 
       $(bar).css("width", progress + "%"); 
      }, 
      add: function (e, data) { 
       data.context = $("<div></div>").html("Uploading...<div class='progressHolder'><div class='progress'>&nbsp;</div></div>").appendTo($("#files")); 
       data.submit(); 
       $("#processing").fadeIn(); 
      }, 
      stop: function (e, data) { 
       $("#uploadFiles").fadeIn(); 
       $("#processing").fadeOut(); 
      }, 
      done: function (e, data) { 
       $.each(data.result.files, function (index, file) { 
        idArray.push(file.Id); 
       }); 
      } 
     }); 

有沒有人知道爲什麼會發生這種情況？我怎樣才能讓進度條在完成/停止時被考慮進去？

Answer 1

當您上傳文件時，該文件首先（顯然）上載到服務器，然後服務器將執行請求的服務器端腳本，然後處理該文件。如果「處理文件」部分請求不是即時的，則在達到100％的進度和完成的回調被觸發之間將存在延遲。如果網絡滯後，可能還會有延遲。

進度事件只跟蹤上傳的進度，而不是跟蹤請求的進度。

一個解決方案是讓你的進度條停止在90%然後在完成回調中將它碰到100%。簡單地乘以data.total由1.1

 progress: function (e, data) { 
      var progress = parseInt(data.loaded/(data.total*1.1) * 100, 10); 
      var bar = data.context.children().children(".progress"); 
      $(bar).css("width", progress + "%"); 
     },