File APIを使ってローカルから参照した画像のサムネイルを表示する

inputのfileでローカルから参照した画像のサムネイルを表示させてみます。

対応ブラウザ

File APIの対応ブラウザはこちら。
IEは一部非対応の機能がありますが、IE10から対応しています。
スマホでもある程度は対応していますが、機能が一部非対応のものが多いようです。

サンプルコード

HTML

<input type="file" name="select" id="select" />
<div id="thumb">ここにサムネイルを表示します。</div>

CSS

サムネイルのサイズ幅の上限を指定しておきます。

#thumb img {
	max-width: 300px;
}

JavaScript

// File APIに対応しているか確認
if(window.File) {
	var thumb = document.getElementById('thumb');
	var select = document.getElementById('select');

	// ファイルが選択されたとき
	select.addEventListener('change', function(e) {
		// 選択されたファイルの情報を取得
		var fileData = e.target.files[0];
		var imgType = fileData.type;

		// 選択されたファイルが画像かどうか確認
		if(!imgType.match(/^image/)) {
			alert('画像を選択してください');
			select.value = '';
			thumb.innerHTML = 'ここにサムネイルを表示します。';
			return;
		}

		var reader = new FileReader();
		// ファイル読み取りに失敗したとき
		reader.onerror = function() {
			alert('ファイル読み取りに失敗しました')
			thumb.innerHTML = '';
		}
		// ファイル読み取りに成功したとき
		reader.onload = function() {
			var insert = '<img src="' + reader.result + '"><br>';
			insert += 'filename: ' + fileData.name + '<br >';
			insert += 'filesize: ' + fileData.size;
			thumb.innerHTML = insert;
		}
		// ファイル読み取りを実行
		reader.readAsDataURL(fileData);
	}, false);
}

サムネイルを表示するデモページ
　

【参考サイト】

• File API入門 – File APIとFileReader APIの利用 | CodeGrid
• JavaScript でのローカル ファイルの読み込み – HTML5 Rocks
• 連載：人気順に説明する初めてのHTML5開発：JavaScriptでファイル操作！？ File APIを使いこなそう (1/2) – ＠IT