Wie verwende ich FileReader.onload mehrmals auf einer Seite?

Question

Ich habe eine Seite, die mehrere Eingänge für das Hochladen einzelner Dateien hat. Art wie folgt aus:

<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> 

Innen uploadFiles(), habe ich zunächst eine Reihe von jeder Datei in die Eingabefelder erstellen:

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

Dann versuche ich, Filereader die onLoad Ereignis für jede Datei in der rufen "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() ist eine Funktion, die funktioniert.

Wenn ich dies, nur das letzte Element in der "Dateien" -Array ist hochgeladen.

Wenn inputField1 eine Datei namens file1.jpg hat, hat inputField2 eine Datei namens file2.jpg, etc, würde ich folgendes in der Konsole:

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

Ich fühle mich wie ich etwas wirklich grundlegende bin fehlt mit der Verwendung von FileReader. Jede Hilfe wäre willkommen. Vielen Dank!

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

Es sieht aus wie das Problem mit dem "var fileName = f.name;" außerhalb des Onloads sein. Ich denke, das e.target.result wäre im ursprünglichen Beispiel korrekt gewesen. Die Ausgabe wäre auch von der Ausführungsreihenfolge der Dinge abhängig. Wenn der Browser jedes onload direkt nach readAsArrayBuffer aufruft, möchte das out: richtig, aber es sieht so aus, als ob Sie es tun würden, es würde die Schleife alle 3 mal ausführen und dann alle Onloads aufrufen.

So sieht es aus wie die einfachste Lösung, um Original-Code ändern würde gewesen zu:

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

Oder wenn möglich anhand der Dateiname von "e.target".