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

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

filereader

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

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!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です