FileReader: loadstart 事件
注意：此功能在 Web Workers 中可用。
FileReader 介面的 loadstart 事件在檔案讀取操作開始時觸發。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("loadstart", (event) => { })
onloadstart = (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-loadstart-event |
| File API # dfn-onloadstart |
瀏覽器相容性
載入中…