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

Web開発

技術解説

連載 :

HTML5の便利なTips100選

2013年2月6日(水)

山田祥寛（YAMADA, Yoshihiro）

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

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

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

［リスト02］テキストファイルの内容を表示（readText.html）

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8" />
05<title>HTML5 TIPS</title>
06<script>
07window.addEventListener('DOMContentLoaded', function() {
08// ファイルが指定されたタイミングで、その内容を表示
09document.querySelector("#file").addEventListener('change', function(e) {
10    // File APIを利用できるかをチェック
11    if (window.File) {
12      // 指定されたファイルを取得
13      var input = document.querySelector('#file').files[0];
14      // ファイル読み込みの準備（1）
15      var reader = new FileReader();
16      // ファイルの読み込みに成功したら、その内容を<div id="result">に反映（2）
17      reader.addEventListener('load', function(e) {
18        var output = reader.result.replace(/(\n|\r)/g, '<br />');
19        document.querySelector("#result").innerHTML = output;
20      }, true);
21      // ファイルの内容をテキストとして取得（3）
22      reader.readAsText(input, 'UTF-8');
23    }
24  }, true);
25});
26</script>
27</head>
28<body>
29ファイル：
30<input id="file" name="file" type="file" />
31<hr />
32<!--読み込み結果を反映する場所を用意-->
33<div id="result"></div>
34</body>
35</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）

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8" />
05<title>HTML5 TIPS</title>
06<script>
07window.addEventListener('DOMContentLoaded', function() {
08  // ファイルが指定されたタイミングで、その内容を表示
09  document.querySelector("#file").addEventListener('change', function(e) {
10    // File APIを利用できるかをチェック
11    if (window.File) {
12      // 指定されたファイルを取得
13      var input = document.querySelector('#file').files[0];
14      // ファイル読み込みの準備
15      var reader = new FileReader();
16      // ファイルの読み込みに成功したら、その内容を<img id="result">に反映
17      reader.addEventListener('load', function(e) {
18        document.querySelector("#result").src = reader.result;
19      }, true);
20      // ファイルの内容をData URL形式で取得（1）
21      reader.readAsDataURL(input);
22    }
23  }, true);
24});
25</script>
26</head>
27<body>
28ファイル：
29<input id="file" name="file" type="file" />
30<hr />
31<!--読み込み結果を反映する場所を用意-->
32<img id="result" />
33</body>
34</html>