FileReader.onload - 読み込みが正常に完了した時に発火するイベント
onloadは、FileReaderのイベントです。データの読み込みが正常に完了した時にloadイベントが発生し、ここに設定したコールバック関数が呼び出されます。
概要
- 名前
- onload
- 所属
- FileReader
- イベント
- load
- IDL
attribute EventHandler onload; typedef EventHandlerNonNull? EventHandler; callback EventHandlerNonNull = any (Event event);
- 仕様書
- https://w3c.github.io/FileAPI/#dfn-onload
チュートリアル
onloadでイベントを設定する例です。
var fileReader = new FileReader() ;
fileReader.onload = function ( event ) {
console.log( event ) ;
}
Event.addEventListener()でも、同様にイベントを設定できます。
fileReader.addEventListener( "load", function ( event ) {
console.log( event ) ;
} ) ;
デモ
FileReader.onloadのデモです。読み込みを正常に完了したタイミングでメッセージを表示します。コメントアウトを外して、読み込みを中断するとイベントが発生しません。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
input { width: 95% ; font-size: 16px ; }
</style>
</head>
<body>
<input type="file" multiple id="hoge">
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;
var fileReader = new FileReader() ;
element.onchange = function () {
resultElement.textContent = "" ;
var file = element.files[0] ;
fileReader.readAsText( file ) ;
// fileReader.abort() ; // 読み込みを中止してみよう!
}
fileReader.onload = function ( event ) {
console.log( event ) ;
resultElement.textContent = "読み込みを完了しました!!" ;
}
var lastError ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● 6.0+ | ● | ● 10+ | ● | ● 6.0+ | ● 4.0+ |
関連記事
- FileReader.onloadend
- onloadendは、FileReaderのイベントです。データの読み込みが成功か失敗に関わらず終了した時にloadendイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- FileReader
- FileReaderは、FileやBlobのデータを読み込むための機能を備えたインターフェイスです。
- FileReader.readAsBinaryString()
- readAsBinaryString()は、FileReaderのメソッドです。ファイルを、バイナリ文字列として読み込みます。
- FileReader.readAsDataURL()
- readAsDataURL()は、FileReaderのメソッドです。ファイルを、Data URIとして読み込むメソッドです。例えば画像ファイルをこのメソッドで読み込んで、読み込んだデータをimg要素のsrc属性に指定すればブラウザに表示できます。