load
イベントは、ファイルが正常に読み込めたときに発生します。
例
ライブデモ
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>
CSS
img.preview {
margin: 1rem 0;
}
.event-log-contents {
width: 18rem;
height: 5rem;
border: 1px solid black;
margin: .2rem;
padding: .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
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);
結果
仕様書
ブラウザーの対応
Update compatibility data on GitHub | デスクトップ | モバイル |
---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
---|
load event | Chrome
完全対応
あり | Edge
完全対応
あり | Firefox
完全対応
あり | IE
完全対応
あり | Opera
完全対応
あり | Safari
完全対応
あり | WebView Android
完全対応
あり | Chrome Android
完全対応
あり | Firefox Android
完全対応
あり | Opera Android
完全対応
あり | Safari iOS
完全対応
あり | Samsung Internet Android
?
|
---|
凡例
-
完全対応
- 完全対応
-
実装状況不明
- 実装状況不明
関連情報