ファイルから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;
}

index.js

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

	var 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を取得
			var upload_file_url = URL.createObjectURL(e.target.files[0]);

			// img要素を作成
			var 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要素を挿入して画像ファイルを表示
			var 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メソッドを実行しています。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。