XMLHttpRequestUpload: loadend イベント

loadend イベントは、リクエストが完全に完了したとき（load の後、または失敗したとき（abort の後）、または（error の後）に発行されます。

loadend イベントは、リクエストが中断されたとき（timeout、abort、error）にも送られます。このような場合、イベントの loaded と total の値はどちらも 0 になります。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("loadend", (event) => {});

onloadend = (event) => {};

イベント型

ProgressEvent です。 Event から継承しています。

Event ProgressEvent

イベントプロパティ

親である Event からプロパティを継承しています。

lengthComputable 読取専用

論理値で、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示す。言い換えれば、進捗が計測可能かどうかを示します。

loaded 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、total をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

total 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは Content-Length （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例

loadend イベントの使用

loadend イベントを使用して、アップロードの終了（成功または失敗）を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの XMLHttpRequestUpload ページを参照してください。

js
// アップロードが完了したら、進捗バーを非表示にする
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

関連情報