複数のファイルをJavascriptで読み込むと、最後のファイルのみが読み込まれる

Question

JavaScriptのコードにいくつかのテストテキストファイルを読み込む必要があります。 1.txt、2.txt、3.txtという3つのファイルがあり、それぞれに1行が含まれています。

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 
    for (var i = 0; i < files.length; i++) { 
     console.log("Start loop") 
     myFile = files.item(i); 
     var myReader = new FileReader(); 
     myReader.readAsText(myFile); 
     myReader.onload = function(e) { 
      var rawLog = myReader.result; 
      console.log(rawLog) 
     }; 

    } 
}; 

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

このコードは、複数のファイルを選択できるWebページ上のボタンになります。以下の結果になっている：

Start loop 
Contents 1.txt 
Start loop 
Contents 2.txt 
Start loop 
Contents 3.txt 

しかし、それは出力することは以下の通りです：

Start loop 
Start loop 
Start loop 
null 
null 
Contents 3.txt 

どのように私は最初のものを生成することができますか？私はエラーがonload関数にあると期待していますが、私は間違っているのか分かりません。

Answer 1

コードvar myReader = new FileReader();は、最初のインスタンスを破棄して各ループに変数を再割り当てしています。

ローカルブロック変数のインスタンスが上書きされないように、コードを2つの関数に分割することをお勧めします。

function readFile(file) { 
    var myReader = new FileReader(); 
    myReader.readAsText(file); 
    myReader.onload = function(e) { 
     var rawLog = myReader.result; 
     console.log(rawLog) 
    }; 
} 

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 
    for (var i = 0; i < files.length; i++) { 
     myFile = files.item(i); 
     readFile(myFile); 
    } 
};