このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
FileReader: abort イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
abort イベントは、読み込みが中断されたときに発生します。例えば、プログラムが FileReader.abort() を呼び出した場合などです。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("abort", (event) => {});
onabort = (event) => {};
イベント型
ProgressEvent です。 Event から継承しています。
イベントプロパティ
親である Event からプロパティを継承しています。
ProgressEvent.lengthComputable読取専用-
論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。
ProgressEvent.loaded読取専用-
64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、
totalをこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。 ProgressEvent.total読取専用-
64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは
Content-Length(メッセージの本文のサイズ)であり、ヘッダーやその他のオーバーヘッドは含まれません。
例
ライブデモ
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>
img.preview {
margin: 1rem 0;
}
.event-log-contents {
width: 18rem;
height: 5rem;
border: 1px solid black;
margin: 0.2rem;
padding: 0.2rem;
resize: none;
}
.example {
display: grid;
grid-template-areas:
"select log"
"preview log";
}
.file-select {
grid-area: select;
}
.preview {
grid-area: preview;
}
.event-log {
grid-area: log;
}
.event-log > label {
display: block;
}
JavaScript
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);
}
reader.abort();
}
fileInput.addEventListener("change", handleSelected);
結果
仕様書
| 仕様書 |
|---|
| File API # dfn-abort-event |
| File API # dfn-onabort |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。