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の非同期性のために2つの問題にぶつかります。最初に、各FileReaderインスタンスに対してonprogressイベントが発生します。これにより、各ファイルの進捗状況がわかります。一方、私は個々のファイルの代わりにすべてのファイルの合計進行状況を表示するつもりです。

第2に、FileReaderのすべてのインスタンス（各ファイルに1つ）が完了したときに実行する必要があるアクションを実行します。現在、FileReaderは非同期に機能しているため、FileReaderが処理を完了する前にアクションが実行されます。私はたくさんの検索をしてきましたが、まだこれらの問題の解決策を見つけることはありません。どんな助けもありがとうございます。

Answer 1

まず、2番目の問題に対処しましょう。あなたはすべてのファイルをアップロードしたら、その関数を別の関数に自分の後の完了コードを定義し、呼び出す必要があります：

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ではなくプログレスバーでこれを実装すると仮定すると、アップロードするファイルごとに別々のプログレスバーを用意し、各ファイルの進捗状況を正確に計算することができます対応する進捗バーを更新します。それが明確である必要があるかどうか私に教えてください。