FileReader()에서 결과 얻기

Question

다음과 같은 문제가 있습니다.

여러 파일에 대한 업로드 양식이 있습니다. 업로드 프로세스가 정상적으로 진행됩니다. 문제는 FileReader() 결과와 관련이 있습니다. 여러 파일 (이미지)을 업로드 할 때 업로드가 완료되면 해당 엄지 손가락을 만들어야합니다.

files = e.target.files; 

for (var i = 0; i < files.length; i++) { 

    //ajax request goes here 

    var reader = new FileReader(); 
    reader.onload = (function (e) { 

     var img = document.createElement('img'); 
     img.file = e; 
     img.className = 'thumbs_'; 
     img.src = e.target.result; 

     //Every image has a wrapper div with the id 'nDv0','nDv1','nDv2' etc.     

     document.getElementById('nDv' + i).appendChild(img); 
    })(e); 

    reader.readAsDataURL(files[i]); 

    //request sent 

} 

익명 함수와 관련된 클로저를 제거하면 for 루프가 종료 될 때 값이 아무 것도됩니다. 예를 들어 파일이 3 개인 경우 값은 3이되고 결과는 마지막 래퍼 div에 추가되고 이미지가 표시됩니다.

클로저를 사용하면 모든 이미지가 해당 div에 추가되지만 반환 된 결과는 정의되지 않으므로 이미지가 표시되지 않습니다.

그래서 어떻게 모든 손가락을 해당 div에 추가 할 수 있습니까?

reader.onload = (function (e) { 
    //onload code 
    //inside function e is event from outside 
})(e);//e is event from upper code 

을 그리고 onload 핸들러는 비동기이기 때문에 i는 files.length에 동일 해집니다 :

Answer 1

당신은 logic error 있습니다. 그래서 당신은 당신의 onload 핸들러를 변경해야합니다

reader.onload = function (index) { 
    var img = document.createElement('img'); 
    img.className = 'thumbs_';//it's right className? 
    img.src = this.result;//result is dataURL     
    document.getElementById('nDv' + index).appendChild(img); 
}.bind(reader, i);