画像ファイルをアップロードせずにimgタグに表示する
JavaScriptとHTMLだけでローカルにある画像ファイルをサーバを介さずにブラウザ上のimgタグに表示することができます。
HTML
<input type="file" id="myfile" accept=".jpeg, .jpg, .png"/>
<img id="jpegViewer">
スクリプト
const input = document.querySelector("#myfile");
const reader = new FileReader();
reader.onload = (event) => {
const imgElement = document.getElementById('jpegViewer');
imgElement.src = event.target.result;
};
reader.readAsDataURL(input.files[0]);
document.querySelector()で選択したファイルの一覧が取得できます。１ファイルの場合は、input.files[0]で参照できます。
FileReader.readAsDataURL()の実行結果がonloadで通知されます。取得したDataURLはevent.target.resultに格納されています。
