JavaScriptでinput type=”file”で画像をアップした際にプレビューを表示する方法

今回は<input type="file">をクリックした際にアップした画像をそのまま表示するプレビュー的な機能の作り方を解説します。

ファイルアップ時のプレビューを表示する方法
まとめ

ファイルアップ時のプレビューを表示する方法

HTMLはこれだけです。<img>にsrcが入っていませんがjsで追加するので大丈夫です。

<input type="file" id="input">
<img id="img">

jsは以下のように書けばokです。

document.getElementById('input').addEventListener('change', (e) => {
  const file = e.target.files[0]; // ファイル本体

  // エラー回避
  if(!file) {
    return;
  }
  const reader = new FileReader();
  reader.onload = (e) => {
    document.getElementById('img').src = e.target.result; // 読み込み完了時にData URIをsrcに渡す
  };
  reader.readAsDataURL(file); // 画像をData URIとして読み込む
});

これをコピペしてもらえばそのまま動くのですが一応解説しておきます。

<input type="file">にはchangeイベントを指定できます。

ファイル本体はe.target.files[0]で取得できます。FileListという形で取得されるので[0]とする必要があります。

if(!file)の部分はファイルをアップロードしようとしてキャンセルするとコンソールにエラーが出てしまうので、それを回避するために入れています。

new FileReader()は<input type="file">でアップロードされたファイルを読み取る機能です。読み取った画像はreadAsDataURL(file)でData URIというURLっぽい形で取得できます。reader.onloadで取得が終わったタイミングの処理が書けるので、<img>のsrcにe.target.resultを入れたらokです。

（中身がどんなものか気になる人はconsole.log(e.target.result)してみてください。data:image/png;base64,xxxxxxxxxというbase64エンコードされたインラインのURLで表す形になっています）。

new FileReader()やreadAsDataURL()は普段あまり使わないので馴染みがない人も多いと思います。気になる人はMDNも見てみてください。

＞＞FileReader – Web API | MDN

＞＞FileReader.readAsDataURL() – Web API | MDN