File APIによるファイルアクセス (2/4)

まずは、選択したファイルの情報を調べてみることにします。下のリスト欄に、script.jsのソースコードを掲載しておきました。実際にページにアクセスし、なにかファイルを選択してみてください。ファイル名、サイズ、ファイルのタイプ、最終修正日などが表示されます（Chromeで確認。ブラウザによっては動かない場合があります）。

これでファイルを選択すると、ファイル名、ファイルサイズ（バイト数）、ファイルの種類、最終修正日などの情報が表示されます。

ここでは、まずdochange関数で、ファイルを選択する<input type="file">タグから「File」オブジェクトをとり出しています。

var file = event.target.files[0];

この部分ですね。eventのtargetには「files」というプロパティが用意されています。これは「FileList」という複数ファイルを管理するオブジェクトが設定されています。このFileListでは、配列のようにファイルが管理されているのです。

管理されているファイルは、「File」というオブジェクトの形をしています。このFileオブジェクトには、ファイルに関する各種の情報や、ファイルアクセスのためのメソッドなどがまとめられているのです。

files[0]で一つ目のFileオブジェクトを取り出し、それを引数に渡してgetfileinfo関数を呼び出しています。

getfileinfo関数では、渡されたFileオブジェクトのプロパティを変数にとり出しています。ここでは以下のようなプロパティが使われています。

name――ファイル名
size――ファイルサイズ
type――ファイルタイプ（HTTPでの形式）
modify――最終修正日

後は、これをひとまとめにして表示するだけです。意外と簡単ですね。ただし！　ここにあげたプロパティは、、ブラウザですべてサポートされているわけではありません。例えば、Firefox 3.5では、以下のプロパティしかありませんでした。（nameやsizeもあるのですが、値はundefinedになってしまうようです）

fileName――ファイル名
fileSize――ファイルサイズ

更には、w3c.orgのドラフトを見ると、最終修正日はmodifyではなく、lastModifiedDateになっていたりします。まだこのあたりはやや不確定要素という感じもしますね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function dochange(event) {
	var file = event.target.files[0];
	if (file) {
		getfileinfo(file);
	}
}

function getfileinfo(file){
	var name = file.name;
	var size = file.size;
	var type = file.type;
	var modify = file.modify;
	var str = "名前:" + name + "<br>";
	str += "サイズ:" + size + "<br>";
	str += "タイプ:" + type + "<br>";
	str += "最終修正日時:" + modify + "<br>";
	document.getElementById("msg").innerHTML = str;
}


※Firefox 3.5の場合

function getfileinfo(file){
	var name = file.fileName;
	var size = file.fileSize;
	var str = "名前:" + name + "<br>";
	str += "サイズ:" + size + "<br>";
	document.getElementById("msg").innerHTML = str;
}