FileReader: sự kiện load
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
Sự kiện load của giao diện FileReader được kích hoạt khi tệp đã được đọc thành công.
Sự kiện này không thể huỷ và không nổi bọt.
Cú pháp
Dùng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("load", (event) => { })
onload = (event) => { }
Loại sự kiện
Một ProgressEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Cũng kế thừa các thuộc tính từ sự kiện cha Event.
ProgressEvent.lengthComputableRead only-
Cờ boolean cho biết liệu tổng công việc cần thực hiện và lượng công việc đã làm bởi tiến trình bên dưới có thể tính toán được không.
ProgressEvent.loadedRead only-
Giá trị số nguyên 64-bit không dấu cho biết lượng công việc đã được thực hiện bởi tiến trình bên dưới. Tỷ lệ công việc hoàn thành có thể tính bằng cách chia
totalcho giá trị này. Khi tải tài nguyên qua HTTP, giá trị này chỉ tính phần thân của thông điệp HTTP, không tính tiêu đề và các phần mở rộng khác. ProgressEvent.totalRead only-
Giá trị số nguyên 64-bit không dấu đại diện cho tổng lượng công việc mà tiến trình bên dưới đang thực hiện. Khi tải tài nguyên qua HTTP, đây là
Content-Length(kích thước phần thân thông điệp), không tính tiêu đề và các phần mở rộng khác.
Ví dụ
Ví dụ trực tiếp
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
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);
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| File API # dfn-load-event |
| File API # dfn-onload |