FileReader：load 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

备注： 此特性在 Web Worker 中可用。

FileReader 接口的 load 事件在成功读取文件时触发。

此事件不可取消且不会冒泡。

语法

在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

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

onload = (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">选择个人资料图片：</label>
    <input
      type="file"
      id="avatar"
      name="avatar"
      accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="图片预览" />

  <div class="event-log">
    <label for="eventLog">事件日志：</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} 字节\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);

结果

规范

Specification
File API
# dfn-load-event
File API
# dfn-onload

浏览器兼容性

BCD tables only load in the browser

参见