ファイルからURLを取得してページに表示する

アップロードしたファイルのURLを取得して表示する

フォームで選択されたファイルは、URLオブジェクトのcreateObjectURLメソッドを使ってURLを取得することができます。

createObjectURLメソッドを使って取得したURLは一時的にメモリ上に展開されているものですが、画像ファイルであればimg要素のsrc属性に設定するとファイルをページ上に表示することができます。

ここで作成するURLはメモリ上に展開されるため、必要がなくなったら無駄なメモリの消費を抑えるためにrevokeObjectURLメソッドでURLを削除してメモリを解放します。

以下の例は、フォームでJPEG形式かPNG形式のファイルを選択するとimg要素を作成してページに表示します。
DEMO

index.html

<h1>JavaScriptレシピ</h1>
<form method="post" action="" enctype="multipart/form-data">
  <input type="file" name="input_file" value="">
</form>
<div id="file_viewer"></div>

style.css

form {
  margin-bottom: 20px;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  let input_file = document.querySelector('[name=input_file]');

  input_file.addEventListener('change', function(e){

    if( e.target.files[0].type === 'image/jpeg' || e.target.files[0].type === 'image/png' ) {

      // アップロードしたファイルのURLを取得
      let upload_file_url = URL.createObjectURL(e.target.files[0]);

      // img要素を作成
      let img_element = document.createElement("img");
      img_element.src = upload_file_url;
      img_element.alt = e.target.files[0].name;
      img_element.width = 100;
      img_element.onload = function(){
        URL.revokeObjectURL(this.src);
      }

      // ページにimg要素を挿入して画像ファイルを表示
      let div_element = document.getElementById('file_viewer');
      div_element.appendChild(img_element);
    }
  });
});

コードを実行すると、画像ファイルを選択したら次のように表示されます。

このコードでは、まずページ読み込み完了時にファイルを選択するinput要素に対してイベントリスナーを登録します。
ファイルが選択されたときに発生するイベント「change」を検知すると、この後に続く処理を実行します。

アップロードされたファイルに対して、まずはif文でMIMEタイプを確認します。
今回はJPEG形式かPNG形式の画像ファイルを使うため、「image/jpeg」か「image/png」のいずれかだるかをここで確認します。

画像ファイルだったときはURL.createObjectURLメソッドを実行してファイルのURLを取得し、変数upload_file_urlに保持しておきます。
ここで取得したURLを、続いて作成したimg要素のsrc属性に設定します。

あとはページ上にimg要素を挿入して完了です。
今回はid属性「file_viewer」のdiv要素にappendChildメソッドを使って挿入して画像を表示します。

作成したファイルのURLは削除してメモリを解放するために、ここでは画像が読み込み完了したときに発生するイベント「onload」をトリガーにしてrevokeObjectURLメソッドを実行しています。