画像ファイルをアップロードせずに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()で選択したファイルの一覧が取得できます。1ファイルの場合は、input.files[0]で参照できます。

FileReader.readAsDataURL()の実行結果がonloadで通知されます。取得したDataURLはevent.target.resultに格納されています。

参考

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です