如何使用FileReader的異步特性實現進度條和回調

Question

我在for循環中調用了FileReader API來遍歷多個文件對象。我使用FileReader來顯示圖像的預覽。

function() { 
    for (var i in Files) { 
     var fileReader = new FileReader(); 
     fileReader.readAsBinaryString(Files[i]); 
     fileReader.onload = function() { 

      // do something on FileReader onload 

     } 

     fileReader.onprogress = function(data) { 
      if (data.lengthComputable) {            
       var progress = parseInt(((data.loaded/data.total) * 100), 10); 
       console.log(progress); 
      } 
     } 
    } 

    // do something on completion of FileReader process 
    // actions here run before completion of FileReader 
} 

由於FileReader API的異步性質，我遇到了兩個問題。首先，爲每個FileReader實例啓動onprogress事件。這給了我每個文件的進步。而我打算顯示所有文件的總進度而不是單個文件。

其次，我想執行只應在FileReader的所有實例（每個文件一個）完成時才執行的操作。目前，由於FileReader是異步運行的，所以在FileReader完成任務之前運行這些操作。我搜索了很多，但還沒有找到解決這些問題的方法。任何幫助表示讚賞。

Answer 1

讓我們先解決你的第二個問題。你需要在一個單獨的功能，一旦定義你的後完成代碼，並調用它的所有文件都上傳：

function() { 
    var total = Files.length; loaded = 0; 
    for (var i in Files) { 
     var fileReader = new FileReader(); 
     fileReader.readAsBinaryString(Files[i]); 
     fileReader.onload = function() { 

      // do something on FileReader onload 
      loaded++; 

      if (loaded == total){ 
       onAllFilesLoaded(); 
      } 
     } 

     fileReader.onprogress = function(data) { 
      if (data.lengthComputable) {            
       var progress = parseInt(((data.loaded/data.total) * 100), 10); 
       console.log(progress); 
      } 
     } 
    } 
} 

function onAllFilesLoaded(){ 
    //do stuff with files 
} 

現在，跟蹤進度，還有你能解決幾個不同的方式。現在你正在加載所有文件，每個文件都報告自己的進度。如果您不介意進度更新頻率較低，則只需使用onload處理程序報告每次文件上傳時的進度。如果你想要真正精細的，準確的進度更新，你將不得不計算所有文件合計的總大小，然後跟蹤每個文件已加載的數量，並使用已加載的每個文件的總和文件比較所有文件的總大小來報告進度。

或者，假設您正在使用進度條而不是console.log來實現此功能，則可以爲每個正在上載的文件提供一個單獨的進度欄，並按照您現在正在進行的操作計算每個文件的進度，然後更新相應的進度條。讓我知道是否有任何需要澄清。