XMLHttpRequestUpload

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月.

メモ: この機能はウェブワーカー内で利用可能ですが、サービスワーカーでは使用できません。

XMLHttpRequestUpload インターフェイスは、特定のXMLHttpRequestのアップロード処理を表します。これは不透明オブジェクトで、基盤であるブラウザー依存のアップロード処理を表します。これはXMLHttpRequestEventTargetであり、XMLHttpRequest.uploadを呼び出すことで取得できます。

HTML

html

<!doctype html><html lang="ja">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>XMLHttpRequestUpload のテスト</title>    <link rel="stylesheet" href="xhrupload_test.css" />    <script src="xhrupload_test.js"></script>  </head>  <body>    <main>      <h1>ファイルのアップロード</h1>      <p>        <label for="file">アップロードするファイル</label>        <input type="file" />      </p>      <p>        <progress></progress>      </p>      <p>        <output></output>      </p>      <p>        <button disabled>中止</button>      </p>    </main>  </body></html>

CSS

css

body {  background-color: lightblue;}main {  margin: 50px auto;  text-align: center;}#file {  display: none;}label[for="file"] {  background-color: lightgrey;  padding: 10px;}progress {  display: none;}progress.visible {  display: inline;}

JavaScript

addEventListener("DOMContentLoaded", () => {  const fileInput = document.getElementById("file");  const progressBar = document.querySelector("progress");  const log = document.querySelector("output");  const abortButton = document.getElementById("abort");  fileInput.addEventListener("change", () => {    const xhr = new XMLHttpRequest();    xhr.timeout = 2000; // 2 秒    // リンク中止ボタン    abortButton.addEventListener(      "click",      () => {        xhr.abort();      },      { once: true },    );    // アップロードを開始する時に、進捗バーを表示する    xhr.upload.addEventListener("loadstart", (event) => {      progressBar.classList.add("visible");      progressBar.value = 0;      progressBar.max = event.total;      log.textContent = "Uploading (0%)…";      abortButton.disabled = false;    });    // 進捗イベントを受信するたびに、バーを更新する    xhr.upload.addEventListener("progress", (event) => {      progressBar.value = event.loaded;      log.textContent = `Uploading (${(        (event.loaded / event.total) *        100      ).toFixed(2)}%)…`;    });    // アップロードが完了したら、プログレスバーを非表示にする    xhr.upload.addEventListener("loadend", (event) => {      progressBar.classList.remove("visible");      if (event.loaded !== 0) {        log.textContent = "Upload finished.";      }      abortButton.disabled = true;    });    // エラー、中止、タイムアウトの場合、プログレスバーを非表示にする    // これらのイベントは xhr オブジェクトでも待ち受けすることができることに注意    function errorAction(event) {      progressBar.classList.remove("visible");      log.textContent = `Upload failed: ${event.type}`;    }    xhr.upload.addEventListener("error", errorAction);    xhr.upload.addEventListener("abort", errorAction);    xhr.upload.addEventListener("timeout", errorAction);    // 本体を構築    const fileData = new FormData();    fileData.append("file", fileInput.files[0]);    // 理論的には、 open() 呼び出しの後にイベントリスナーを設定することができますが、    // ブラウザーはこの部分にバグがありがち    xhr.open("POST", "upload_test.php", true);    // イベントリスナーは送信する前に設定しなければならないことに注意してください（プリフライトリクエストであるため）。    xhr.send(fileData);  });});