페이지에서 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 이벤트를 호출하려고 시도를 "파일"배열 :

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()은 작동하는 함수입니다.

실행할 때 "파일"배열의 마지막 항목 만 업로드됩니다. 내가 진정으로 근본적인 뭔가를 놓친 거지 같은

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

내 기분이 : inputField1 파일 이름 file1.jpg이있는 경우

는 inputField2라는 파일 file2.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 번 ​​실행 한 다음 모든 onloads를 호출하고 있습니다.

은 그래서 원래의 코드에 대한 간단한 수정 변경했을 같습니다

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"에서 파일 이름을 입력합니다.