<input type="file"> で入力された画像をサムネイル表示する（Pure JS）

概要

画像のアップロードをする前にユーザが選択した画像をサムネイル表示する機能をライブラリを使わずに実装します。

実装

index.html

<input type="file" onchange="onChangeFileInput(this)">
<div>
  <img id="thumbnail" accept="image/*" src="/img/icon_add.png">
</div>

script.js

const onChangeInputFile = (e) => {
  if (e.target.files && e.target.files[0]) {
    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('thumbnail').setAttribute('src', e.target.result);
    };
    reader.readAsDataURL(e.target.files[0]);
  }
};

style.css

#thumbnail {
  height: 100px;
  max-width: 100px;
  margin: 10px;
  border: solid thin lightgray;
  border-radius: 5px;
}

ファイルが選択されていない状態だと不自然なぺしゃんこ四角形ができるので、100×100 の画像（icon_add.png）をセットしています。

利用例

　

※ イラストの出典: 手巻き寿司のイラスト（いらすとや）

参考

• https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded