input type=”file”の画像をJavaScriptで表示する

HTMLタグのinput type=”file”で選択した画像をJavaScriptでブラウザに表示する方法です。

一度サーバーにポストせずにフロント側でJavaScriptで表示させるの時に使用します。

画像をJavaScriptで表示
ブラウザ表示

画像をJavaScriptで表示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
  const fileup = (e) => {
    const img = document.getElementById('img');
    const reader = new FileReader();
    reader.onloadend = () => {
      img.src = reader.result;
    }
    reader.readAsDataURL(e.files[0]);
  }
  </script>
</head>
<body>
  ファイル：<input type="file" accept="image/jpeg,image/png,image/gif" onchange="fileup(this)" />
  <div>
    <img src="" id="img" />
  </div>
</body>
</html>

input type=”file”で画像を選択した後onchangeイベントでイベントを発火させます。

FileReader()のonloadendでファイル読み込み後にimgタグのsrcにdata:～形式の画像を渡します。

これでブラウザのimgタグの場所に画像が表示されます。

imgタグにデータを渡すのでacceptでファイルタイプをjpeg,png,gifに限定しています。