|
|---|
W3Cで標準化が進められている「File API」を使うと、指定したローカルファイルのファイル情報やファイルの中身（データ）をJavaScriptで取得できます。今回のJavaScriptラボはこのFile APIを使って、ブラウザー上にファイルの内容を表示してみましょう。テキストファイルの内容をそのまま表示するサンプルと、バイナリファイルを16進数データの羅列（バイナリダンプ、ダンプリスト）として表示するサンプルを作成します。
File APIの対応ブラウザー
File APIは2010年10月現在、以下のブラウザーで利用できます。
- Firefox 3.6 / 4β
- Google Chrome 6
このほか、Safari 5が、File APIを使ったファイル情報（ファイル名やファイルサイズなど）の取得に対応していますが、ファイル内容へのアクセスはできないので今回作成するサンプルは動作しません。また、Opera 10.6、Internet Explorer 9（ベータ）ではFile APIは利用できません。
ブラウザーがFile APIを実装しているかどうかは以下のようにして簡単に調べられます。
<h1>File APIが使用可能か調べる</h1>
<div id="result">File APIは使用できません</div>
<script>
if (window.File){
document.getElementById("result").innerHTML = "File APIは使用できます";
}
</script>
Firefox 3.6での実行結果
Safari 5での実行結果
Google Chrome 6での実行結果
Opera 10.6での実行結果
IE9ベータでの実行結果
以降のサンプルはFile APIが扱える前提で作成していますが、実際に利用するときにはサンプル1の方法でブラウザーの実装状況をチェックした後で、File APIを使った処理を記述してください。
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
