SYNCERのロゴ
アイキャッチ画像

ローカル画像を表示する方法

ファイルをアップロードする前のプレビュー表示など、ユーザーがサーバーにアップロードしなくても画像をウェブページ上に表示する方法です。データURI形式で表示する方法と、Blob URLで表示する方法の2種類があります。

サンプルコード

Blob URL、またはData URIを取得し、それをそのままimg要素のsrc属性に指定すれば表示できます。

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

Blob URL

document.getElementById( "target" ).addEventListener( "change", function() {
	var fileList = this.files ;

	for( var i=0,l=fileList.length; l>i; i++ ) {
		var blobUrl = window.URL.createObjectURL( fileList[i] ) ;
	}
} ) ;

Data URI

document.getElementById( "target" ).addEventListener( "change", function() {
	var fileList = this.files ;

	for( var i=0,l=fileList.length; l>i; i++ ) {
		var fileReader = new FileReader() ;

		fileReader.onload = function() {
			var dataUri = this.result ;
		}

		fileReader.readAsDataURL( fileList[i] ) ;
	}
} ) ;

デモ

Blob URL

Blob URLとは端末内にあるファイルのURLです。このBlob URLを作成して参照することで、ウェブページ上でローカル画像を表示することができます。

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

	// 個数分の画像を表示する
	for( var i=0,l=fileList.length; l>i; i++ ) {
		// Blob URLの作成
		var blobUrl = window.URL.createObjectURL( fileList[i] ) ;

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

Data URI

Data URIとは画像をテキスト化したものです。このデータをブラウザが解析して画像として表示します。拡張子が.jpg、.pngのファイルよりも容量が約3割ほど大きくなります。

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

	// 個数分の画像を表示する
	for( var i=0,l=fileList.length; l>i; i++ ) {
		// FileReaderオブジェクトを作成
		var fileReader = new FileReader() ;

		// 読み込み後の処理を決めておく
		fileReader.onload = function() {
			// Data URIを取得
			var dataUri = this.result ;

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

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

備考

Data URIとは?

Data URIとは、ウェブページに埋め込められるようにテキスト化した画像のデータです。画像は通常はHTMLなどとは別ファイルとして存在し、HTTPリクエストを通じて読み込みますが、HTTPリクエストが数多く発生することは表示の高速化の上で障害になります。そういったことなど諸々あり、HTTPリクエストを発生させずにテキストとして埋め込める、このData URIという形式のデータが存在しています。下記がData URIの例ですが、膨大なため、途中を端折っています。Blob URLに比べたメリットは、強いて言えば他人にシェアできることです。

data:image/png;base64,iVBORw0KGgoAAAANSUhE ... gKQWOP1oQAAAAASUVORK5CYII=

Blob URLとは?

Blob URLとは、ユーザーの端末内に保存されている画像ファイルを直接表示するための、一時的なURLです。ページ移動するとすぐに無効になってしまいます。このURLに他の端末でアクセスしても無効です。そのため、他人にシェアできないというデメリットがあります。下記は、Blob URLの例です。データURIに比べてとても短いので、用途が合うならばこちらを優先して利用したいところですね。

blob:https%3A//syncer.jp/bbee0776-8357-40e9-844e-69c17828563d
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。