【JavaScript】ローカルの画像をプレビュー表示する方法

2021年6月29日 2021年6月30日

こんにちは！CODE CLUB965のKです！

今回は、ローカルの画像ファイルをアップロードする前にプレビュー表示する方法について書こうと思います。

今回の方法で実装すれば、ユーザーがサーバーにアップロードしなくても画像ファイルをウェブページ上に表示することができます。

ちなみに、今回紹介する方法は、

・データURI形式で表示する方法
・Blob URLで表示する方法

の2種類です。

前提として、HTML側には以下のように記述することとします。

<input id="file" type="file" multiple>

inputタグに「type="file"」を指定します。
また、「multiple」は複数選択を可能にするためのものです。

データURI形式で表示する方法

Data URIは、ウェブページに埋め込められるようにテキスト化した画像データのことをいいます。
ブラウザがData URIを解析して画像として表示します。
拡張子が.jpg、.pngのファイルよりも容量が大きくなるようです。

// changeイベントを設定
document.getElementById( "file" ).addEventListener( "change", function() {
	// フォームで選択された全ファイルを取得
	var file_list = this.files ;

	// 選択された画像を表示
	for( var i=0,l=file_list.length; l>i; i++ ) {
		// FileReaderオブジェクトを作成
		var file_reader = new FileReader() ;

		// 読み込み後の処理
		file_reader.onload = function() {
			// Data URIを取得
			var data_uri = this.result ;

			// HTMLに書き出し
                        // src属性にData URIを指定
			document.body.innerHTML += '<a href="' + data_uri + '" file="_blank"><img src="' + data_uri + '"></a>' ;
		}

		// ファイルをData URIとして読み込む
		file_reader.readAsDataURL( file_list[i] ) ;
	}
} ) ;

Blob URLで表示する方法

Blob URLは、端末内にあるファイルURLです。
やり方は、Blob URLを作成してHTMLに書き出してあげる処理を書けば、ウェブページ上でローカル画像を表示することができます。

// changeイベントを設定
document.getElementById( "file" ).addEventListener( "change", function() {
	// フォームで選択された全ファイルを取得
	var file_list = this.files ;

	// 選択された画像を表示
	for( var i=0,l=file_list.length; l>i; i++ ) {
		// Blob URLの作成
		var blobUrl = window.URL.createObjectURL( file_list[i] ) ;

		// HTMLに書き出し
                // src属性にblob URLを指定
		document.body.innerHTML += '<a href="' + blobUrl + '" file="_blank"><img src="' + blobUrl + '"></a>' ;
	}
} ) ;