2016/2/22更新

JavaScriptで選択された外部ファイルを出力する：FileReader

JavaScriptは主にブラウザ上で動くので、ここではユーザーがブラウザ上で選択したテキストファイルを読み込む方法について説明します。

ファイルを読み込むためにはFile APIを利用します。FileReaderオブジェクトを使ってsample.txtを読み込み、ファイル内容をテキストエリアに表示するサンプルプログラムについて見て行きましょう。

sample.txt

aaaaaaaa
bbbbbbbb
cccccccc

aaaaaaaa

bbbbbbbb

cccccccc

おおまかには、次のような手順となります。

ブラウザ上でユーザーがファイルを選択する
FileReaderオブジェクトを生成する
選択されたファイルを文字列として読み込む
読み込みが完了したら読み込んだ結果を表示する

サンプルプログラム

inputタグで読み込むファイルを選択できるようにします。また、読み込んだファイルの内容を表示するテキストエリアをつくります。

HTML

<input type="file" id="file"><br/>
<textarea id="text" rows=10 cols=50>ここに読み込んだテキストファイルの中身が表示されます。</textarea>

1 2	<input type="file" id="file"><br/> <textarea id="text" rows=10 cols=50>ここに読み込んだテキストファイルの中身が表示されます。</textarea>

JavaScript

var ele  = document.getElementById('file'); // input要素オブジェクトの取得

// ファイルが選択されたら引数の関数を実行
ele.addEventListener("change", function(ev){
    var file = ev.target.files;    // 選択されたファイルはFileListオブジェクトに入り、配列のように扱える
    var reader = new FileReader(); // FileReaderオブジェクトの生成
    reader.readAsText(file[0]);    // 選択されたファイル(fileの先頭要素）を文字列として読み込む
	
    // 読み込みが完了した際に実行される処理
    reader.onload = function(e){
        document.getElementById('text').innerHTML = reader.result;
    }
}, false);

var ele = document.getElementById('file'); // input要素オブジェクトの取得

// ファイルが選択されたら引数の関数を実行

ele.addEventListener("change", function(ev){

var file = ev.target.files; // 選択されたファイルはFileListオブジェクトに入り、配列のように扱える

var reader = new FileReader(); // FileReaderオブジェクトの生成

reader.readAsText(file[0]); // 選択されたファイル(fileの先頭要素）を文字列として読み込む

// 読み込みが完了した際に実行される処理

reader.onload = function(e){

document.getElementById('text').innerHTML = reader.result;

}

}, false);

上記のサンプルプログラムでは、選択されたファイルの内容がテキストエリアに出力されます。

コードの説明

外部ファイルを読み込むためにはFileReaderオブジェクトを利用します。FileReaderオブジェクトの使い方は色々ありますが、ここではテキストファイルを読み込むために必要な次の３つを押さえておきましょう。

FileReaderオブジェクトの生成：変数 = new FileReader();
文字列としてファイルを読み込む：変数.readAsText(Fileオブジェクト);
読み込み結果を取得する：変数.result

まず、ファイルが選択された際に行う処理を関数としてaddEventListner()に渡します。addEventListner()の第1引数"change"はファイルが選択されるというイベントを表し、第2引数にイベント発生時の処理を無名関数として定義しています。

関数内では、まず選択されたファイルをFileListオブジェクトとして取得します。FileListはinput要素オブジェクトのfilesプロパティで参照することができます（このため、ev.target.filesはele.filesと記述しても同様です）。

FileListは配列のように扱うことができますが、配列ではなくオブジェクトです。今回は選択するファイルが一つだけですが、複数のファイルを選択することもあるためにFileListを使います（複数ファイルを選択できるようにするには、inputタグにmultipleを追記します）。

次に、FileReaderオブジェクトを生成し、fileReaderオブジェクトのメソッドであるreadAsText()でファイルをテキスト形式で読み込みます。今回読み込むファイルは一つなので、引数はfileの先頭要素であるfile[0]となります。

readAsText()は非同期なので、読み込み結果を表示する処理はファイルの読み込みが完了した後に呼び出します。reader.onloadの「onload」は、読み込みが無事に完了したというイベントを表しています。読み込みが完了した際の処理として、右辺に読み込み結果であるreader.resultを表示する処理を関数として記述します。なお、addEventListner()を使って以下のように記述しても同様です。

reader.addEventListener("load", function(e){
    document.getElementById('text').value = reader.result;
}, false);

reader.addEventListener("load", function(e){

document.getElementById('text').value = reader.result;

}, false);

以下にFileReaderオブジェクトのメソッド、プロパティ、及びイベントについて簡単にまとめます。

メソッド

readAsArrayBuffer()	ファイルをArrayBufferとして読み込む
ReadAsText()	ファイルをテキストとして読み込む
readAsDataURL()	ファイルをDataURLとして読み込む
readAsBinaryString()	ファイルをバイナリデータとして読み込む
abort()	読み込みを破棄する

プロパティ

state	ファイル読み込み時のステータス
result	読み込んだファイルの内容を格納

イベント

onloadstart	読み込みの開始
onprogress	読み込み中
onabort	読み込みの破棄
onerror	エラーの発生
onload	読み込み完了（成功）
onloadend	成否に関わらず読み込み完了

JavaScript