FileReader: progress イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
メモ: この機能はウェブワーカー内で利用可能です。
progress は FileReader インターフェイスのイベントで、FileReader がデータを読むときに定期的に発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("progress", (event) => {}); onprogress = (event) => {}; イベント型
ProgressEvent です。 Event から継承しています。
イベントプロパティ
親である Event からプロパティを継承しています。
ProgressEvent.lengthComputable読取専用-
論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。
ProgressEvent.loaded読取専用-
64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、
totalをこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。 ProgressEvent.total読取専用-
64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは
Content-Length（メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。
例
ライブデモ
HTML
html
<div class="example"> <div class="file-select"> <label for="avatar">プロフィール画像を選択してください:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /> </div> <img src="" class="preview" height="200" alt="Image preview" /> <div class="event-log"> <label for="eventLog">イベントログ:</label> <textarea readonly class="event-log-contents" id="eventLog"></textarea> </div> </div> JavaScript
js
const fileInput = document.querySelector('input[type="file"]'); const preview = document.querySelector("img.preview"); const eventLog = document.querySelector(".event-log-contents"); const reader = new FileReader(); function handleEvent(event) { eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addListeners(reader) { reader.addEventListener("loadstart", handleEvent); reader.addEventListener("load", handleEvent); reader.addEventListener("loadend", handleEvent); reader.addEventListener("progress", handleEvent); reader.addEventListener("error", handleEvent); reader.addEventListener("abort", handleEvent); } function handleSelected(e) { eventLog.textContent = ""; const selectedFile = fileInput.files[0]; if (selectedFile) { addListeners(reader); reader.readAsDataURL(selectedFile); } } fileInput.addEventListener("change", handleSelected); 結果
仕様書
| Specification |
|---|
| File API # dfn-progress-event |
| File API # dfn-onprogress |