inputタグで選択した画像をimgタグに表示する

投稿日：2021年8月30日

Table of Contents

コード

input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。

URL.createObjectURL()を使用する

FileReader.readAsDataURL()に受け取ったファイルを渡すとbase64エンコーディングされたdata:URLが返されるため、それをimg要素のsrc属性に設定することで画像を表示することができます。

<html>
  <head>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input accept="image/*" type="file" id="uploadImage">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      uploadImage.onchange = event => {
        const [file] = uploadImage.files
        if (file) {
          thumbnail.src = URL.createObjectURL(file)
        }
      }
    </script>
  </body>
</html>

FileReader.readAsDataURL()を使用する

<html>
  <head>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input accept="image/*" type="file" id="uploadImage">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      uploadImage.onchange = event => {
        const [file] = uploadImage.files
        if (file) {
          let reader = new FileReader();
          reader.onload = function() {
            thumbnail.src = reader.result;
          }
          reader.readAsDataURL(file);
        }
      }
    </script>
  </body>
</html>

jQueryを使用する場合

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  </head>
  <body>
    <form action="" method="post" enctype="multipart/form-data">
      <input type="file" name="upload" id="upload" accept="image/*">
      <p><img id="thumbnail" src=""></p>
    </form>
    <script>
      $('#upload').change(function(){
        const [file] = this.files
        if (file) {
          let reader = new FileReader();
          reader.onload = function() {
            $('#thumbnail').attr('src', reader.result);
          }
          reader.readAsDataURL(file);
        }
      });
    </script>
  </body>
</html>