選択されたファイルの情報を表示する
File APIは1つまたは複数のローカルファイルを扱います。対象となるファイルはHTMLフォームのfile（type属性がfileのinput要素）またはドラッグ＆ドロップで指定します。今回はフォームを使うので従来どおり以下のようなHTMLを記述し、参照ボタンを表示します。ユーザーが参照ボタンをクリックするとファイル選択ダイアログが表示されます。
<input type="file" id="myFile" />
multiple属性を指定するとダイアログで複数のファイルをまとめて選択できます。
<input type="file" id="myFile" multiple />
選択されたファイルは以下のようにfiles配列にアクセスして読み出します。filesには選択されたファイルの数だけファイルオブジェクトが格納されます（選択されたファイルが1つの場合でも配列になります）。
document.getElementById("myFile").files[0]
ファイルが1つの場合はfiles[0]になります。複数のファイルを扱う場合は繰り返し命令であるforを使います。
選択されたファイルの内容を16進数で表示するにはファイルサイズの情報が必要ですので、ファイルの内容を読み出す前にファイル情報を取得します。ファイル情報は選択されたファイルオブジェクトのそれぞれのプロパティを参照します。ファイルオブジェクトには以下のプロパティがあります。
| name | ファイル名 |
| size | ファイルサイズ（バイト数） |
| type | ファイルの種類（MIME Type） |
| urn | ファイルのURN |
ファイルサイズであれば以下のようにして取得できます（単位はバイト数）。
document.getElementById("myFile").files[0].size
サンプル2は、選択されたファイルの名前とサイズ、種類(MIME type)を表示するスクリプトです。サンプル2はSafari 5でも動作します。
ファイル選択ボタンをクリックする
テキストファイルを選択する
「ファイル情報を表示」ボタンをクリックすると
ファイルの情報が表示される
<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>
