Confused with 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);" /> 

Событие изменения инициирует функцию, но ничего не происходит после выполнения первой строки (предупреждающее сообщение). Сообщения об ошибках отсутствуют. Может кто-нибудь помочь мне, где я ошибаюсь.

Answer 1

Вы присоединяетесь к событию onload, но вы не делаете ничего, что могло бы привести к пожару. Вы должны переместить свой вызов readAsText() снаружи, а не в обработчик.

Как MDN documentation говорит о onload:

Свойство FileReader.onload содержит обработчик события выполняется, когда событие нагрузки срабатывает, когда содержание чтения с readAsArrayBuffer, readAsBinaryString, readAsDataURL или readAsText доступна.