このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第41回

File APIでブラウザーからローカルファイルを操作

2010年10月05日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 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を実装しているかどうかは以下のようにして簡単に調べられます。

サンプル1


        <h1>File APIが使用可能か調べる</h1>
        <div id="result">File APIは使用できません</div>
        <script>
            if (window.File){
                document.getElementById("result").innerHTML = "File APIは使用できます";
            }
        </script>


【図】01.png 【図】02.png
Firefox 3.6での実行結果Safari 5での実行結果
【図】03.png 【図】04.png
Google Chrome 6での実行結果Opera 10.6での実行結果
【図】05.png
IE9ベータでの実行結果

 以降のサンプルはFile APIが扱える前提で作成していますが、実際に利用するときにはサンプル1の方法でブラウザーの実装状況をチェックした後で、File APIを使った処理を記述してください。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング