자바 스크립트로 여러 파일을 읽으면 마지막 파일 만 읽습니다.

Question

몇 가지 테스트 텍스트 파일을 자바 스크립트 코드로 읽어야합니다. 1.txt, 2.txt 및 3.txt이라는 3 개의 파일이 있으며 각 파일에는 한 줄로 구성됩니다.

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

이렇게하면 여러 파일을 선택할 수있는 버튼이 웹 페이지에 생성됩니다. 다음과 같은 결과로되어있다 :

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();은 각 루프에서 변수를 재 할당하여 첫 번째 인스턴스를 파기한다.

코드를 두 개의 함수로 분리하여 로컬 블록 변수의 인스턴스가 완료되기 전에 덮어 쓰지 않도록하는 것이 좋습니다.

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