HTML5 FileReaderと混同しました

Question

私のAPIを理解すると、（入力タグからの）テキストファイルの内容を出力するコードが次のようになるはずです。イベントオブジェクトの使い方がわかりません。私がMozilla Developerのドキュメントで何かを読んだほど、私はもっ​​と混乱しています。

<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()コールをハンドラーの外に移動しなければなりません。

FileReader.onloadプロパティreadAsArrayBuffer、readAsBinaryString、readAsDataURLまたはreadAsTextで読み出されたコンテンツが利用可能な負荷イベントが発生したときに実行されたイベントハンドラを、含まれていますMDN documentationとして

約onloadは言います。