FileReaderでローカルファイルを読込み内容を表示する

Input type=”file”でファイルを設定することができるので、その中身をJavaScript（HTML5）を使いローカル（自分のパソコン等）にあるファイルを設定して中身を読込んで表示する方法について。

下にあるコードが、ファイルを読込んで表示する例です。

1：var fileにid=”file”に設定したFileオブジェクトを取得します。
2：ファイルの中身を取得するのにFileReaderオブジェクトを生成します。
3：readAsTextメソッドでテキスト形式のファイルを読込みます。
4：読込み成功時に実行するイベントハンドラonloadに関数を設定。
5：読込んだデータは、FileReaderオブジェクトのresultにあるので変数に代入
6：読込んだファイルの中身をテキストに追加して表示します。

function filereadButton (){
	var file = $('#file')[0].files[0]; // 1                                                                                              

	var reader = new FileReader();     // 2
	reader.readAsText(file);           // 3
	reader.onload = function() {       // 4
		var textData = reader.result;    // 5
		//console.dir(textData);
		$('#read_show').text(textData);  // 6
	};
};

<input type="file" id="file" />
<input type="button" value="ファイル読み込み" onclick="filereadButton()" />
<div id="read_show"></div>

text.txt（読み込むファイルの中身）

Hello JavaScript!