HTML5からサポートされているFile APIを使って、サーバー上のファイルではなくディスクトップ上のファイルにアクセスすることができる。さっそく、ディスクトップ上の画像ファイルを読み込み表示してみた。

HTML

<p><input type="file" id="fin"></p>
<dl>
 <dt>ファイル名</dt>
 <dd id="name">-</dd>
 <dt>サイズ</dt>
 <dd id="size">-</dd>
 <dt>タイプ</dt>
 <dd id="type">-</dd>
 <dt>最終更新日時</dt>
 <dd id="mdate">-</dd>
</dl>
<div id="pic">
</div>

JavaScript

$(function(){
	$('#fin').change(function(){
		// 選択されたファイルを表すFileオブジェクト
		var file = this.files[0];
		if( !file ) {
			return;
		}
		// ファイルの各種情報を表示
		document.querySelector('#name').textContent = file.name;
		document.querySelector('#size').textContent = file.size;
		document.querySelector('#type').textContent = file.type;
		document.querySelector('#mdate').textContent = file.lastModifiedDate;

		if (file.type.match('image.*')) {
      // file.typeが画像の場合にファイルを読み込む
			var fr = new FileReader();    // FileReaderオブジェクト
			fr.onload = function() {
				$('#pic').empty().append($('<img>',{src:fr.result, alt:'preview', width:'320'}));
			}
			fr.readAsDataURL(file);  // ファイルの読み込み
		}
	});
});

画像ファイルを選ぶと画像が表示される

ファイル名

–

サイズ

–

タイプ

–

最終更新日時

–