JavaScript FileReader의 액세스 요소

Question

File API를 사용하여 JavaScript로 파일을 읽으려고합니다.

다음 코드

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    var fileBlobs = []; 
    var reader = new FileReader(); 
    for (var i = 0, f; f = files[i]; i++) { 
        fileBlobs.push(reader.readAsBinaryString(f)); 
        console.log(reader) 
     } 
     } 

그것은 나에게

FileReader {onloadend: null, onerror: null, onabort: null, onload: null, onprogress: null…} 
error: null 
onabort: null 
onerror: null 
onload: null 
onloadend: null 
onloadstart: null 
onprogress: null 
readyState: 2 
result: "lat, lng, popup↵13.47262306516617336, 52.47896324136591062, 55↵13.40861762468653673, 52.54336741663770027, 44↵13.29255442595013115, 52.51117712705399754, 33↵13.38642907198692988, 52.44880630287082113, 22" 
__proto__: FileReader 

가 어떻게 만 result 부분에 액세스 할 수 있습니다이 개체를 기록 있나요?

Answer 1

load 이벤트는 FileReader으로 처리해야합니다. 파일을 읽기

reader.onload = function() { 
    var contents = this.result; 
}; 

비동기 작업입니다 : 핸들러에서, reader.result 또는 this.result가 액세스 할 수 있습니다. 따라서 각 파일에 대해 별도의 FileReader을 만들어야합니다. FileReader을 다시 사용하려면 for 루프를 사용할 수 없습니다. 대신 현재 파일이 처리 될 때까지 다음 파일을 읽으 려 할 때까지 기다려야합니다.

Answer 2

는 테스트,하지만 난이 일을해야한다고 생각하지 :

var file = document.getElementById('element-id').files; 
var fr = new FileReader(); 
var storeBlobs = []; 
fr.onload = function(e) { 
    storeBlobs.push(e.target.result); 
}; 
for(var i = 0, l = file.length; i < l; i++) { 
    var content = fr.readAsText(file[i]); 
} 

파일은 온로드 방법 여물을 FileReader 객체를 조작 할 수있는 객체의 배열을 반환합니다. 사용자가 둘 이상의 파일을로드하는 경우 모든 파일을 처리하려고하므로 for 루프를 사용합니다. 이 코드는 테스트되지 않았지만 작동해야한다고 강조합니다. 우리는 하나 개의 파일을로드 해당 사용자를 가정하면

우리는 전용 파일 객체가이 객체와 코드의 첫 번째 라인을 교체하는이 같은 행동을 할 수 있습니다 :

var file = document.getElementById('element-id').files[0];