XMLHttpRequestUpload: loadend イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
loadend
イベントは、リクエストが完全に完了したとき(load
の後、または失敗したとき(abort
の後)、または(error
の後)に発行されます。
loadend
イベントは、リクエストが中断されたとき(timeout
、abort
、error
)にも送られます。このような場合、イベントの loaded
と total
の値はどちらも 0 になります。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("loadend", (event) => {});
onloadend = (event) => {};
イベント型
ProgressEvent
です。 Event
から継承しています。
イベントプロパティ
親である Event
からプロパティを継承しています。
lengthComputable
読取専用-
論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。
loaded
読取専用-
64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、
total
をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。 total
読取専用-
64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは
Content-Length
(メッセージの本文のサイズ)であり、ヘッダーやその他のオーバーヘッドは含まれません。
例
loadend
イベントの使用
loadend
イベントを使用して、アップロードの終了(成功または失敗)を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの XMLHttpRequestUpload
ページを参照してください。
// アップロードが完了したら、進捗バーを非表示にする
xhr.upload.addEventListener("loadend", (event) => {
progressBar.classList.remove("visible");
if (event.loaded !== 0) {
// 成功裏に完了
log.textContent = "アップロードが完了しました。";
}
abortButton.disabled = true;
});
仕様書
Specification |
---|
XMLHttpRequest Standard # event-xhr-loadend |
XMLHttpRequest Standard # handler-xhr-onloadend |
ブラウザーの互換性
BCD tables only load in the browser