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

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

TIPS 054:テキストファイルを読み込む

File APIでは、ファイルのメタ情報を取得するばかりではありません。ファイルの内容を読み込み、JavaScriptのコードの中で利用することもできます。

例えば以下は、<input type="file">要素で指定されたテキストファイルを読み込み、ページ上に表示する例です。

[リスト02]テキストファイルの内容を表示(readText.html)

  <!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を利用できるかをチェック
      if (window.File) {
        // 指定されたファイルを取得
        var input = document.querySelector('#file').files[0];
        // ファイル読み込みの準備(1)
        var reader = new FileReader();
        // ファイルの読み込みに成功したら、その内容を<div id="result">に反映(2)
        reader.addEventListener('load', function(e) {
          var output = reader.result.replace(/(\n|\r)/g, '<br />');
          document.querySelector("#result").innerHTML = output;
        }, true);
        // ファイルの内容をテキストとして取得(3)
        reader.readAsText(input, 'UTF-8');
      }
    }, true);
  });
  </script>
  </head>
  <body>
  ファイル:
  <input id="file" name="file" type="file" />
  <hr />
  <!--読み込み結果を反映する場所を用意-->
  <div id="result"></div>
  </body>
  </html>
図2:テキストファイルの内容を表示

ファイルを読み込むには、FileReaderというオブジェクトを利用します(1)。(2)ではファイルのロードが完了したloadイベントのタイミングで、ファイルの内容を取り出し、テキストを

要素にセットするよう、イベントリスナーを定義しています。ファイルの内容には、FileReaderオブジェクトのresultプロパティでアクセスしてください。ここでは、ブラウザに正しく改行を反映させるために、replaceメソッドで改行文字(\n、\r)を
要素に置き換えている点にも注目です。

ただし、(2)の段階ではイベントリスナーを定義しているだけで、まだファイルの読み込みそのものが実施されているわけではありません。ファイルの読み込みを実行しているのは、(3)のreadAsTextメソッドです。readAsTextメソッドは、引数に「読み込みファイル(Fileオブジェクト)」「文字コード」の順で指定します。文字コードがUTF-8の場合には、第2引数は省略しても構いません。

TIPS 055:バイナリファイルを読み込む

FileReaderオブジェクトを利用することで、テキストファイルとほぼ同じ要領で画像/音声などのバイナリファイルを読み込むこともできます。

例えば以下は、<input type="file">要素で指定された画像ファイルを読み込み、要素に反映する例です。

[リスト03]画像ファイルの内容を表示(readDataURL.html)

  <!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を利用できるかをチェック
      if (window.File) {
        // 指定されたファイルを取得
        var input = document.querySelector('#file').files[0];
        // ファイル読み込みの準備
        var reader = new FileReader();
        // ファイルの読み込みに成功したら、その内容を<img id="result">に反映
        reader.addEventListener('load', function(e) {
          document.querySelector("#result").src = reader.result;
        }, true);
        // ファイルの内容をData URL形式で取得(1)
        reader.readAsDataURL(input);
      }
    }, true);
  });
  </script>
  </head>
  <body>
  ファイル:
  <input id="file" name="file" type="file" />
  <hr />
  <!--読み込み結果を反映する場所を用意-->
  <img id="result" />
  </body>
  </html>
図3:画像ファイルの内容を表示

画像ファイルを読み込むには、readAsTextメソッドの代わりにreadAsDataURLメソッドを利用します(1)。これによって、画像ファイルをData URL形式で取得できます。

Data URLとは、URLに直接データを埋め込むための表現で、以下のような形式で表せます。

data:[コンテンツタイプ][;base64],データ本体

Data URLを利用することで、画像や音声などのデータをいちいちファイルに落とし込むことなく、例えば以下のように要素や要素に直接埋め込めるようになります。

(2)のloadイベントリスナーでは、読み込んだ画像データ(reader.result)を、そのまま要素のsrc属性にセットしています。

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

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

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

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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