FileReader: progress 事件
注意：此功能在 Web Workers 中可用。
FileReader 接口的 progress 事件在 FileReader 读取数据期间会周期性地触发。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("progress", (event) => { })
onprogress = (event) => { }
事件类型
一个 ProgressEvent。继承自 Event。
事件属性
也继承自其父级 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);
结果
规范
| 规范 |
|---|
| File API # dfn-progress-event |
| File API # dfn-onprogress |
浏览器兼容性
加载中…