サイト制作に関するメモ書き

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

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

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

対応ブラウザ

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

use-the-file-api-to-display-a-thumbnail-of-the-image-that-is-referenced-from-the-local01

 

サンプルコード

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);
}

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

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP