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

連載 :

2013年2月6日(水)

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 />