すべてのファイルが非同期に読み取られるまで待ちます（FileReader）。

Question

ファイルをアップロードするフォルダをユーザーが選択できるページがあります。ファイルを送信する前に、私はそれらを読んでデータをチェックする必要があります。

$('#folder-select').on('change', getValidFileList); 
var fileList = []; 

var getValidFileList = function(event) { 

    //Get the selected files 
    files = $(this).get(0).files; 

    for(var i=0; i<files.length; i++) { 
     checkFile(files[i]); 
    } 
    //Do something with the final fileList 
    console.log(fileList); 
}; 

var checkFile = function(file) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { 
     //Here I parse and check the data and if valid append it to fileList 
    }; 
    reader.readAsArrayBuffer(file); 

}; 

私がアップロードしたファイルを表示/処理を維持するために結果のfileList配列を利用したいと思い、次のように私のコードが編成されています。 reader.onload（）は非同期に呼び出されているので、forループの後のconsole.log(fileList)の結果は空の配列です（reader.onload()が起動する前に実行されます）。すべてのファイルが読み込まれてfileListに追加されるまで待つ方法はありますか？

Answer 1

だけ与えられているファイルの数に比べて処理されたどのように多くのファイルを追跡：

function getValidFileList(files, callback) { 

    var count = files.length;    // total number of files 
    var fileList = [];      // accepted files 

    //Get the selected files 
    for(var i = 0; i < count; i++) {  // invoke readers 
    checkFile(files[i]); 
    } 

    function checkFile(file) { 
    var reader = new FileReader(); 
    reader.onload = function(event) { 
     var arrayBuffer = this.result; 
     //Here I parse and check the data and if valid append it to fileList 
     fileList.push(arrayBuffer);  // or the original `file` blob.. 
     if (!--count) callback(fileList); // when done, invoke callback 
    }; 
    reader.readAsArrayBuffer(file); 
    } 
}; 

--countは、リーダーのonloadヒットあたり1差し引きます。 = 0（または！count）のときは、コールバックを呼び出します。配列の順序は、これが重要なファイル[n]のものと同じではないことに注意してください。

次に、このようにそれを呼び出す：

$('#folder-select').on('change', function() { 
    getValidFileList(this.files, onDone) 
}); 

function onDone(fileList) { 
    // continue from here 
}