ページ上でFileReader.onloadを何回使用するのですか？

Question

1つのファイルをアップロードするための複数の入力を持つページがあります。種類のこのよう：

<div id="fileUpload1"> 
    <input id="inputField1" type="file"></input> 
</div> 
<div id="fileUpload2"> 
    <input id="inputField2" type="file"></input> 
</div> 
<div id="fileUpload3"> 
    <input id="inputField3" type="file"></input> 
</div> 
<button type="button" onclick="uploadFiles()">Upload</button> 

インサイドuploadFiles（）、私は、最初の入力フィールド内の各ファイルの配列を作成します。

var files = []; 
for (var i = 1; i <= 3; i++) { 
    var element = document.getElementById("inputField" + i); 
    var file = element.files[0]; 
    files.push(file); 
} 

それから私は、内の各ファイルに対してFileReaderののonLoadイベントを呼び出そうとします"ファイル"配列：

for (var i = 0, f; f= files[i]; i++) { 
    var fileName = f.name; 
    console.log("out: " + fileName); 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     console.log("in: " + fileName); 
     addItem(e.target.result, fileName); 
    } 
    reader.readAsArrayBuffer(f); 
} 

addItem（）は機能する関数です。

これを実行すると、"ファイル"配列の最後の項目のみがアップロードされます。

inputField1がfile1.jpgという名前のファイルがある場合は、inputField2はなど、file2.jpgという名前のファイルを持って、私は、コンソールに次のようになるだろう：

out: file1.jpg 
out: file2.jpg 
out: file3.jpg 
in: file3.jpg 
in: file3.jpg 
in: file3.jpg 

私は本当に基本的な何かが欠けていますように私は感じますFileReaderの使い方について説明します。どんな助けもありがとう。ありがとうございました！

Answer 1

<button type="button" onclick="uploadFiles(readF)">Upload</button> 

function uploadFiles(){ 
    var files = []; 
    for (var i = 1; i <= 3; i++) { 
     var element = document.getElementById("inputField" + i); 
     var file = element.files[0]; 
     files.push(file); 
    } 
    for (var i = 0, f; f= files[i]; i++) { 
     console.log("out: " + fileName); 
     readF(f); 
    } 
} 
function readF(f){ 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     var fileName = f.name; 
     console.log("in: " + fileName); 
     addItem(e.target.result, fileName); 
    } 
    reader.readAsArrayBuffer(f); 
} 

Answer 2

「var fileName = f.name;」という問題が発生しているようです。オンロードの外側にある。私はe.target.resultが元の例では正しいと思います。出力はまた、物事の実行順序に依存する。ブラウザがreadAsArrayBufferの直後に各onloadを呼び出した場合、out：は正しいと思いますが、あなたの場合のように、ループを3回実行してから、すべてのonloadを呼び出しています。

は、だから、元のコードへの最も簡単な修正、変更したであろうようになっています

for (var i = 0, f; f= files[i]; i++) { 
    var fileName = f.name; 
    console.log("out: " + fileName); 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     console.log("in: " + fileName); 
     addItem(e.target.result, fileName); 
    } 
    reader.readAsArrayBuffer(f); 
} 

for (var i = 0, f; f= files[i]; i++) { 
    console.log("out: " + fileName); 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     var fileName = f.name; 
     console.log("in: " + fileName); 
     addItem(e.target.result, fileName); 
    } 
    reader.readAsArrayBuffer(f); 
} 

したり、場合可能な基準「e.target」からファイル名を指定します。