今頃 HTML5 の緒に就いたところで恥ずかしいのだが、早速つまずいた。古籏氏の「File APIでブラウザーからローカルファイルを操作」という記事で、jQuery で試そうとした結果、半日つぶしてしまった。が、一つ賢くなった、と自分を慰めている。

お題は選択されたファイルのファイル名、サイズ、ファイル種別(MIME Type)を表示する JavaScript プログラムである。

<h1>ファイル情報を表示する</h1>
<form action="./test.cgi" method="get">
	<input type="file" id="myFile" />
	<input type="button" id="fileInfo" value="ファイル情報を表示" />
</form>
<div id="result"></div>
<script>
	document.getElementById("fileInfo").addEventListener("click", function(){
		var fileData = document.getElementById("myFile").files[0];
		var txt = "ファイルの名前　："+fileData.name+"<br />";  // ファイル名
		txt += "ファイルのサイズ："+fileData.size+"<br />";   // サイズ(Bytes)
		txt += "ファイルの種類　："+fileData.type+"<br />";   // 種類(MIME Type)
		document.getElementById("result").innerHTML = txt;
	}, true);
</script>

FilesAPI では input 要素で file タイプを指定し、加えて「multiple」をアトリビュートに加えると、何とファイル選択で複数ファイルを選択する事ができるようになった。これで JavaScript などの力を借りなくても、一括転送できるようになった訳だ。

さて上のプログラムを jQuery に書き直してみる。

$(document).ready(function() {
	$("#fileInfo").click(function() {
		var fileData = document.getElementById("myFile").files[0];
		var txt = "ファイルの名前　："+fileData.name+"<br />";  // ファイル名
		txt += "ファイルのサイズ："+fileData.size+"<br />";   // サイズ(Bytes)
		txt += "ファイルの種類　："+fileData.type+"<br />";   // 種類(MIME Type)
		$("#result").html(txt);
	});
});
</script>

で OK なのだが、「document.getElementById(“myFile”).files[0]」が気に入らない。ここは「$(“#myFile”)」と指定して、ファイルオブジェクトのプロパティにアクセスしたい訳だ。

さんざん調べて分かったのだが、「prop()」メソッドを利用してファイルオブジェクトの「files」プロパティにアクセスできた。

	var fileData = $("#myFile").prop('files')[0];

オソマツサマでした。