FileReader：进度事件

注意：此功能在 Web Workers 中可用。

当 FileReader 读取数据时，FileReader 接口的 progress 事件会定期触发。

此事件不可取消，也不冒泡。

语法

在类似 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

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

onprogress = (event) => {};

事件类型

一个 ProgressEvent。继承自 Event。

Event ProgressEvent

事件属性

还继承了其父类 Event 的属性.

ProgressEvent.lengthComputable 只读

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

ProgressEvent.loaded 只读

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

ProgressEvent.total 只读

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

示例

实时示例

HTML

html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
      type="file"
      id="avatar"
      name="avatar"
      accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview" />

  <div class="event-log">
    <label for="eventLog">Event log:</label>
    <textarea readonly class="event-log-contents" id="eventLog"></textarea>
  </div>
</div>

JavaScript

js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);

结果

规范

规范
文件 API
# dfn-progress-event
文件 API
# dfn-onprogress

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅