XMLHttpRequestUpload: progress イベント

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.

progress イベントはリクエストがより多くのデータを受信したときに定期的に発行されます。

構文

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

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

onprogress = (event) => {};

イベント型

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

Event ProgressEvent

イベントプロパティ

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

lengthComputable 読取専用

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

loaded 読取専用

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

total 読取専用

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

例

progress イベントの使用

progress イベントを使用することで、長時間のアップロードの進捗情報を取得することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの XMLHttpRequestUpload ページを参照してください。

js
// 進捗イベントを受信するたびに、進捗バーと進捗メッセージを更新
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // 進捗バーを更新
  log.textContent = `Uploading (${((event.loaded / event.total) * 100).toFixed(
    2,
  )}%)…`;
});

仕様書

Specification
XMLHttpRequest Standard
# event-xhr-progress
XMLHttpRequest Standard
# handler-xhr-onprogress

ブラウザーの互換性

BCD tables only load in the browser

関連情報