總體進度條，同時通過HTML5上傳一些文件通過AJAX

Question

我有一個進度條，這取決於文件數量和大小。

我想要顯示整個進度條，同時使用AJAX和HTML5上傳服務器上的文件。

我上傳每個文件到服務器並增加進度條。但我不知道如何。

所以，JavaScript代碼：

$("#add-files").on("change", function(){ 
    var files = $(this).prop("files"); 

    $.each(files, function(index, file) { 
     var formData = new FormData(); 
     formData.append("FileName", file.name); 
     formData.append("FileSize", file.size); 

     uploadOnServer(formData); 
    }); 
}); 

function uploadOnServer(formData) { 
    var xmlHttpRequest = new XMLHttpRequest(); 
    if (xmlHttpRequest.upload) { 
     xmlHttpRequest.upload.addEventListener("progress", function(evt) { 
      if(evt.lengthComputable) { 
       var percent = 100 * (evt.loaded/evt.total); 

       // update progress bar 
      } 
     }); 
    } 

    $.ajax({ 
     url: "test/test", 
     type: "POST", 
     data: formData, 
     processData: false, 
     xhr: function() { return xmlHttpRequest; }, 
     success: function(result) { ... } 
    }); 
} 

Answer 1

如果我沒看錯你要顯示的每個文件的百分比被上傳，然後看看這個

<div id="#statustxt_n">0%</div> 

---

function uploadFile(file) { 
    var formData = new FormData(); 
    formData.append('file', $('#add-files')[0].files[0]); 

     $.ajax({ 
      type: 'post', 
      url: 'test/test', 
      xhr: function() { // Custom XMLHttpRequest 
       var myXhr = $.ajaxSettings.xhr(); 
       if(myXhr.upload){ // Check if upload property exists 
        //update progressbar percent complete 
        statustxt1.html('0%'); 
      // For handling the progress of the upload 
      myXhr.upload.addEventListener('progress',progressHandlingFunction, false); 

        } 
        return myXhr; 
       }, 
      data: formData, 
      success: function (status) { 
       alert("Success") 
       }, 
      processData: false, 
      contentType: false 
     }); 
    } 


function progressHandlingFunction(e) 
{ 
    if(e.lengthComputable){ 
     var percentage = Math.floor((e.loaded/e.total) * 100); 
     //update progressbar percent complete 
     statustxt1.html(percentage + '%'); 
     console.log("Value = "+e.loaded +" :: Max ="+e.total); 
    } 
} 

詳細文章：jquery ajax file upload with Progress Bar

Answer 2

我沒有做過這種進度條之前，所以下面只是一個僞代碼/一個想法你可以嘗試。

首先定義一個全局數組，它包含所有的xmlHttpRequest對象。

var loadingXhrRequests = [];//<--push all xhr requests here 

然後。每當你開始一個新的上傳時，創建你的xhr請求並將它推入數組。

//go over all xhrRequests, and add the total loaded and total to load 
var globalUpdateProgress() { 
    var i, xhr, loaded = 0, total = 0, xhr; 
    for (i = 0; i < loadingXhrRequests.length; i++) { 
     xhr = loadingXhrRequests[i]; 
     if (xhr.total && xhr.loaded) {total+=xhr.total;loaded += xhr.loaded;} 
    } 
    return (100 * (loaded/total)); 
} 
var xhr = new XMLHttpRequest(); 
loadingXhrRequests.push(xhr); 

var xhr2 = new XMLHttpRequest(); 
loadingXhrRequests.push(xhr2); 

//start uploading using xhr and xhr2 ... or more. 

然後，每當你從任何XHR對象獲得的最新進展，您調用通過數組去共享的UpdateProgress功能，並檢查所有XHR對象的進度。還將最後加載的事件/總值存儲在xhr中以供以後訪問。

xhr.upload.addEventListener("progress", function(evt) { 
    if(evt.lengthComputable) { 
     var percent = 100 * (evt.loaded/evt.total); 
     xhr.loaded = evt.loaded; 
     xhr.total = evt.total; 
     //note - check that you dont overwrite any important properties of xhr 
     // update progress bar 
     globalUpdateProgress();//<- call this in all individual xhr progress callback 
    } 
});