如何在頁面上多次使用FileReader.onload？

Question

我有一個頁面，有多個輸入單個文件上傳。有點像這樣：

<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事件中的每個文件「files」array：

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); 
} 

TO

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」 的文件名。