FileReader: load イベント
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月.
load イベントは、ファイルが正常に読み込めたときに発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("load", (event) => {}); onload = (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-load-event |
| File API # dfn-onload |
ブラウザーの互換性
Loading…