HTML5 FileReader와 혼동 됨

Question

API를 이해하면 입력 태그의 텍스트 파일 내용을 출력하는 코드가 다음과 같아야한다는 것을 알았습니다. 이벤트 객체를 어떻게 사용하는지 모르겠습니다. Mozilla 개발자 문서에서 더 많은 것을 읽으십시오. 내가 혼란 스러울수록.

<script> 
function f(event) 
{ 
    alert("Just to check if the function is triggered"); 
    var r = new FileReader() ; 
    r.onload = function() 
    { 
     alert (r.readAsText(document.getElementById['f'].files[0])) ; 
    } 

} 
    </script> 

    <input type="file" id="f" onchange="f(event);" /> 

change 이벤트가 함수를 트리거하지만 첫 번째 행 (경고 메시지)이 실행 된 후에는 아무 일도 일어나지 않습니다. 오류 메시지도 없습니다. 누군가 내가 잘못 가고있는 곳에서 나를 도울 수 있습니까?

Answer 1

이벤트는 onload 이벤트에 연결되어 있지만 이벤트가 발생하는 일은하지 않습니다. 처리자가 아닌 외부로 readAsText() 호출을 이동해야합니다.

FileReader.onload 속성 readAsArrayBuffer, readAsBinaryString, readAsDataURL 또는 readAsText 읽을 콘텐츠를 사용할 수있는로드 이벤트가 발생할 때 실행되는 이벤트 핸들러를 포함하십시오 MDN documentation으로

약 onload 말한다.