PR

JavaScriptでローカルファイルを自在に操る - File API

2013年2月6日(水)
山田 祥寛(YAMADA, Yoshihiro)

HTML5では、新たに追加されたFile APIを利用することで、ローカルのファイルやファイルシステムをJavaScriptのコードから操作できるようになりました。File APIを利用することで、(例えば)ローカルのファイルを読み込み、Ajax経由でサーバサイドに引き渡すような操作も、ごくシンプルなコードで実装できます。

[第7回目次]
  • TIPS 053:ファイルの名前/種類/サイズを取得する
  • TIPS 054:テキストファイルを読み込む
  • TIPS 055:バイナリファイルを読み込む
  • TIPS 056:バイナリファイルを読み込む(2)
  • TIPS 057:ファイル読み込みに失敗した場合の処理を定義する
  • TIPS 058:ファイル読み込み時の進捗状況を表示する

File APIは、大きく以下の仕様に分類できます。

表1:File APIの種類

種類 機能
File API ファイル情報やデータ本体の読み込み
File API:Writer ファイルへの書き込み
File API:Directories and System 仮想的なファイルシステムの操作

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

ただし、File API:Writer/File API:Directories and Systemは、執筆時点では対応ブラウザも限られていることから、本稿でもFile APIを中心に解説を進めます。File APIの対応状況は、以下のとおりです。

表2:File APIの対応バージョン

ブラウザ 対応バージョン
Internet Explorer 10以降
Firefox 3.5以降
Google Chrome 6以降
Safari 5以降
Opera 10以降

※ただし、SafariではFileReaderオブジェクトを、Internet Explorer 10ではreadAsBinaryStringメソッドをサポートしていません。

TIPS 053:ファイルの名前/種類/サイズを取得する

Fileオブジェクトを利用することで、ローカルファイルの情報にアクセスできます。

例えば以下は、<input type="file">要素で指定されたファイルの名前やサイズなどを表示するサンプルです。

[リスト01]ファイルの情報を取得するコード(fileinfo.html)

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8" />
  <title>HTML5 TIPS</title>
  <script>
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8" />
  <title>HTML5 TIPS</title>
  <script>
  window.addEventListener('DOMContentLoaded', function() {
    // ファイルが指定されたタイミングで、その情報を表示
    document.querySelector("#file").addEventListener('change', function(e) {
      // File APIを利用できるかをチェック(1)
      if (window.File) {
        // 指定されたファイルを取得(2)
        var input = document.querySelector('#file').files[0];
        // ファイル情報をページに反映(3)
        document.querySelector('#name').innerHTML = input.name;
        document.querySelector('#type').innerHTML = input.type;
        document.querySelector('#size').innerHTML = input.size / 1024;
        document.querySelector('#urn').innerHTML = input.urn;
      }
    }, true);
  });
  </script>
  </head>
  <body>
  ファイル:
  <input id="file" name="file" type="file" />
  <ul>
    <li>名前:<span id="name"></span></li>
    <li>種類:<span id="type"></span></li>
    <li>サイズ:<span id="size"></span></li>
    <li>URN:<span id="urn"></span></li>
  </ul>
  </body>
  </html>
図1:指定されたファイルの名前/サイズなどを表示

File APIは新しい機能なので、利用する前にまず、ブラウザが対応しているかをチェックしなければなりません。これを行っているのが(1)です。

Fileプロパティはファイル情報にアクセスするためのプロパティで、Fileオブジェクトを取得します。(1)ではFileプロパティにアクセスしてみて、アクセスできればFile APIに対応していると判断し、以降の処理を行っているわけです(これまでに何度も登場した「機能テスト」です)。

Fileオブジェクトは、<input type="file">要素(ファイル入力ボックス)から選択されたファイル、または、ドラッグ&ドロップされたファイルから取得できます。今回扱っているのは前者です(後者の方法については、次回改めて扱います)。

ファイル入力ボックスで選択されたファイルを取得するには、filesプロパティにアクセスしてください(2)。filesプロパティは指定されたファイル(群)をFileオブジェクト配列として返します。ここではfiles[0]として、無条件に先頭のファイル(Fileオブジェクト)を取得します。

Fileオブジェクトを取得できてしまえば、あとは必要な情報を取り出すだけです(3)。以下に、Fileオブジェクトでアクセスできる主なプロパティをまとめておきます。

表3:Fileオブジェクトの主なプロパティ

プロパティ 概要
name 名前
type コンテンツタイプ
size サイズ(バイト単位)
urn URN(リソース識別子)

なお、サンプルでは単一のファイルを扱う方法について触れましたが、以下のようにすることで、複数のファイルを取得することもできます。

  var inputs = document.querySelector('#file').files;
  // 選択されたファイルの数だけ処理を繰り返す
  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
  ...中略...
  }
  ...中略...
  <!--multiple属性で、複数ファイルの選択を許可-->
  <input id="file" name="file" type="file" multiple />
Think IT会員限定特典
  • JavaScriptでローカルファイルを自在に操る - File API

著者
山田 祥寛(YAMADA, Yoshihiro)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています