コピペでOK！アップロードした画像を即座にブラウザに反映しよう

はじめに

画像をアップロードしたら即座に画像のプレビューが見たいときってありますよね。でもAjaxを導入したりするのは面倒。そんなときにすぐ使えるよう、htmlにコピペで実装できるようにしました。

[Before]

[After]

仕組み

アップロードしたら、画像ファイルをbase64文字列化して、src属性に代入しているだけです。

ソースコード

sample.html

    <img id="image" style="display: none;" />  <!-- 画像表示する場所-->
    <input id="file_upload" type="file" /> <!-- 画像をアップロード -->

    <script>
      document.getElementById("file_upload").addEventListener("change", selectedFile, false);

      function selectedFile(event) {
        let files = event.target.files || event.dataTransfer.files;
        showImage(files[0]);
      }

      function showImage(imagedata) {
        let file = imagedata;
        let fileReader = new FileReader();

        // 読み込み完了時の処理を追加
        fileReader.onload = function() {
          const url = this.result;
          const image = document.getElementById("image");
          image.style.display = "block"; //　display:none;を上書き
          image.src = url;
        };
        // ファイルの読み込み(Data URI Schemeの取得)
        fileReader.readAsDataURL(file); //画像表示
      }
    </script>