XMLHttpRequestUpload: progress 事件

基线 广泛可用

此功能已经很成熟，并且可以在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

注意： 此功能在 Web Workers 中可用，但 Service Workers 除外。

语法

当请求收到更多数据时，progress 事件将定期触发。

在诸如 addEventListener() 之类的 方法中使用事件名称，或设置事件处理程序属性。
addEventListener("progress", (event) => {});

onprogress = (event) => {};

事件类型

js

Event ProgressEvent

事件属性

一个 ProgressEvent。继承自 Event。

除了下面列出的属性外，父接口 Event 的属性也可用。

lengthComputable 只读

一个布尔标志，指示基础过程要完成的总工作量和已完成的工作量是否可计算。换句话说，它告诉进度是否可测量。

loaded 只读

一个 64 位无符号整数值，指示基础过程已完成的工作量。已完成的工作量的比率可以通过将 total 除以此属性的值来计算。在使用 HTTP 下载资源时，这仅计算 HTTP 消息的主体，不包括标头和其他开销。

total 只读

示例

使用 progress 事件

一个 64 位无符号整数，表示基础过程正在进行的总工作量。在使用 HTTP 下载资源时，这是 Content-Length（消息主体的大小），不包括标头和其他开销。

在诸如 addEventListener() 之类的 方法中使用事件名称，或设置事件处理程序属性。
// Each time a progress event is received we update the progress bar
// and the progress message
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // Update the progress bar
  log.textContent = `Uploading (${((event.loaded / event.total) * 100).toFixed(
    2,
  )}%)…`;
});

规范

您可以使用 progress 事件来获取有关长时间上传进度的信息。有关上传文件并显示进度条的完整代码示例，请参阅主要 XMLHttpRequestUpload 页面。
规范
# XMLHttpRequest 标准
规范
# event-xhr-progress

浏览器兼容性

handler-xhr-onprogress

另请参阅