XMLHttpRequestUpload

基线 广泛可用

此功能已成熟稳定,并在许多设备和浏览器版本上运行。自 2015 年 7 月.

实例属性

XMLHttpRequestUpload 接口表示特定 XMLHttpRequest 的上传过程。它是一个不透明对象,代表底层浏览器相关的上传过程。它是一个 XMLHttpRequestEventTarget,可以通过调用 XMLHttpRequest.upload 获得。

实例方法

此接口没有特定的属性,但继承了 XMLHttpRequestEventTargetEventTarget 的属性。

事件

abort

此接口没有特定的方法,但继承了 XMLHttpRequestEventTargetEventTarget 的方法。

error

当请求被中止时触发,例如程序调用了 XMLHttpRequest.abort()。也可以通过 onabort 事件处理程序属性获取。

load

当请求遇到错误时触发。也可以通过 onerror 事件处理程序属性获取。

loadend

当请求事务成功完成时触发。也可以通过 onload 事件处理程序属性获取。

loadstart

当请求完成时触发,无论成功(在 load 之后)还是失败(在 aborterror 之后)。也可以通过 onloadend 事件处理程序属性获取。

progress

当请求开始加载数据时触发。也可以通过 onloadstart 事件处理程序属性获取。

timeout

当请求接收更多数据时定期触发。也可以通过 onprogress 事件处理程序属性获取。

示例

当进度由于预设时间到期而终止时触发。也可以通过 ontimeout 事件处理程序属性获取。

使用超时上传文件

HTML

这使你能够将文件上传到服务器;它在上传过程中显示一个进度条,以及一个带有进度和结果(成功或失败)的消息。一个中止按钮允许停止上传。
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>XMLHttpRequestUpload test</title>
    <link rel="stylesheet" href="xhrupload_test.css" />
    <script src="xhrupload_test.js"></script>
  </head>
  <body>
    <main>
      <h1>Upload a file</h1>
      <p>
        <label for="file">File to upload</label><input type="file" id="file" />
      </p>
      <p>
        <progress />
      </p>
      <p>
        <output></output>
      </p>
      <p>
        <button disabled id="abort">Abort</button>
      </p>
    </main>
  </body>
</html>

CSS

html
body {
  background-color: lightblue;
}

main {
  margin: 50px auto;
  text-align: center;
}

#file {
  display: none;
}

label[for="file"] {
  background-color: lightgrey;
  padding: 10px 10px;
}

progress {
  display: none;
}

progress.visible {
  display: inline;
}

JavaScript

css
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 seconds

    // Link abort button
    abortButton.addEventListener(
      "click",
      () => {
        xhr.abort();
      },
      { once: true },
    );

    // When the upload starts, we display the progress bar
    xhr.upload.addEventListener("loadstart", (event) => {
      progressBar.classList.add("visible");
      progressBar.value = 0;
      progressBar.max = event.total;
      log.textContent = "Uploading (0%)…";
      abortButton.disabled = false;
    });

    // Each time a progress event is received, we update the bar
    xhr.upload.addEventListener("progress", (event) => {
      progressBar.value = event.loaded;
      log.textContent = `Uploading (${(
        (event.loaded / event.total) *
        100
      ).toFixed(2)}%)…`;
    });

    // When the upload is finished, we hide the progress bar.
    xhr.upload.addEventListener("loadend", (event) => {
      progressBar.classList.remove("visible");
      if (event.loaded !== 0) {
        log.textContent = "Upload finished.";
      }
      abortButton.disabled = true;
    });

    // In case of an error, an abort, or a timeout, we hide the progress bar
    // Note that these events can be listened to on the xhr object too
    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);

    // Build the payload
    const fileData = new FormData();
    fileData.append("file", fileInput.files[0]);

    // Theoretically, event listeners could be set after the open() call
    // but browsers are buggy here
    xhr.open("POST", "upload_test.php", true);

    // Note that the event listener must be set before sending (as it is a preflighted request)
    xhr.send(fileData);
  });
});

规范

js
规范
# XMLHttpRequest 标准

浏览器兼容性

xmlhttprequestupload

另请参见