FileReader: abort-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das abort-Ereignis der FileReader-Schnittstelle wird ausgelöst, wenn ein Lesevorgang abgebrochen wurde, beispielsweise weil das Programm FileReader.abort() aufgerufen hat.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergereicht.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
js
addEventListener("abort", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
js
onabort = (event) => { }
Ereignistyp
Ein ProgressEvent. Erbt von Event.
Beispiele
Interaktives Beispiel
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);
}
reader.abort();
}
fileInput.addEventListener("change", handleSelected);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| File API # dfn-abort-event |
| File API # dfn-onabort |