FileReader: loadend event
loadend
이벤트는 성공여부와 관계없이 파일읽기가 끝나면 실행됩니다.
버블링 | 해당없음 |
---|---|
이벤트 취소가능 | 해당없음 |
인터페이스 | ProgressEvent (en-US) |
이벤트 핸들러 프로퍼티 | FileReader.onloadend |
예제
Live example
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>Event log:</label>
<textarea readonly class="event-log-contents"></textarea>
</div>
</div>
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 |
브라우저 호환성
BCD tables only load in the browser
See also
- Related events:
loadstart
(en-US),load
(en-US),progress
(en-US),error
(en-US),abort
(en-US)