SYNCERのロゴ
アイキャッチ画像

FileReader.onloadend - 読み込みが終了した時に発火するイベント

onloadendは、FileReaderのイベントです。データの読み込みが成功か失敗に関わらず終了した時にloadendイベントが発生し、ここに設定したコールバック関数が呼び出されます。

概要

名前
onloadend
所属
FileReader
イベント
loadend
IDL
attribute EventHandler onloadend;

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
仕様書
https://w3c.github.io/FileAPI/#dfn-onloadend

チュートリアル

onloadendでイベントを設定する例です。

var fileReader = new FileReader() ;
fileReader.onloadend = function ( event ) {
	console.log( event ) ;
}

Event.addEventListener()でも、同様にイベントを設定できます。

fileReader.addEventListener( "loadend", function ( event ) {
	console.log( event ) ;
} ) ;

デモ

FileReader.onloadendのデモです。読み込みが終了したタイミングでメッセージを表示します。コメントアウトを外して、読み込みを中断した時にも発生するのを確認しましょう。

<!-- このコードは編集できます。 -->

<!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.onloadend = function ( event ) {
	console.log( event ) ;
	resultElement.textContent = "読み込みが終了しました!!" ;
}
var lastError ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
6.0+ 10+ 6.0+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。