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

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

要素にセットするよう、イベントリスナーを定義しています。ファイルの内容には、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>

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

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

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

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

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