JavaScript 選択した画像ファイルをプレビューする
htmlのファイル選択ダイアログで選択した画像ファイルをプレビューとして表示する方法を紹介します。
以下のようにファイル選択のコントロールと、画像を表示させるエリアのimg要素を定義します。
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" onchange="setImage" />
<img id="img" />ファイル選択のコントロールにはonchangeイベントを定義して、ファイルが選択されたタイミングで画像を表示するファンクションを実行します。
画像を表示するファンクションは以下のようになります。
function setImage(e) {
const file = e.target.files;
const reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = () => {
const image = document.getElementById('img');
image.src = reader.result;
};
}解説
ファンクションのパラメータeには選択したファイルの情報があります。
２行目のe.target.filesで選択したファイルの配列を取得します。
FileReaderを使って、ファイルの内容を読み込みます。
読み込みが完了したタイミング（onloadイベント）で読み込んだ内容をimg要素のsrcに設定します。