progressイベント - 読み込み中に繰り返し発生
progressイベントは、何らかの読み込み中に、繰り返して発生するイベントです。
概要
- 名前
- progress
- インターフェイス
- ProgressEvent
- 仕様書
- https://html.spec.whatwg.org/multipage/indices.html#event-progress
デモ
FileReader
FileReaderでのデモです。ローカル環境における動作なので、サイズが大きいファイルでないと複数回は発生しません。
<!-- このコードは編集できます。 -->
<!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.onprogress = function () {
console.log( "読み込み中です!!" ) ;
resultElement.textContent += "読み込み中です!!" + "\n" ;
}
var lastError ;
</script>
</body>
</html>
関連記事
- FileReader.onloadend
- onloadendは、FileReaderのイベントです。データの読み込みが成功か失敗に関わらず終了した時にloadendイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- NonElementParentNode.getElementById()
- getElementById()は、NonElementParentNodeのメソッドです。id属性を指定して要素を取得します。
- FileReader.readAsBinaryString()
- readAsBinaryString()は、FileReaderのメソッドです。ファイルを、バイナリ文字列として読み込みます。
- FileReader.onload
- onloadは、FileReaderのイベントです。データの読み込みが正常に完了した時にloadイベントが発生し、ここに設定したコールバック関数が呼び出されます。