This page was translated from English by the community.Learn more and join the MDN Web Docs community.
FileReader: loadend event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
loadend 이벤트는 성공여부와 관계없이 파일읽기가 끝나면 실행됩니다.
| 버블링 | 해당없음 |
|---|---|
| 이벤트 취소가능 | 해당없음 |
| 인터페이스 | ProgressEvent |
| 이벤트 핸들러 프로퍼티 | FileReader.onloadend |
예제
Live example
HTML
html
<div> <div> <label for="avatar">Choose a profile picture:</label> <input type="file" name="avatar" accept="image/png, image/jpeg" /> </div> <img src="" height="200" alt="Image preview..." /> <div> <label>Event log:</label> <textarea readonly></textarea> </div></div>img.preview { margin: 1rem 0;}.event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem;}.example { display: grid; grid-template-areas: "select log" "preview log";}.file-select { grid-area: select;}.preview { grid-area: preview;}.event-log { grid-area: log;}.event-log > label { display: block;}.event-log-contents { resize: none;}JS
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 = 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);결과
명세
| Specification |
|---|
| File API # dfn-loadend-event |
| File API # dfn-onloadend |