JavaScript - ファイル選択ダイアログで選んだテキストの内容を表示

ファイル選択ダイアログを表示し、 選択したファイルの内容を読み込んで表示するサンプルプログラムを紹介します。

テキストファイルを１つ読み込み、その内容をtextarea要素に表示します。

HTML

ファイル選択ダイアログを表示するための「type="file"」のinput要素と、 テキスト内容を表示するためのtextarea要素を用意します。

<form>
	<p><label>ファイルを選択: </label>
		<input type="file" id="fread" /></p>
	
	<p><textarea id="out"></textarea></p>
	
</form>

JavaScript

JavaScirptのコードは次のようになります。

var elem = document.getElementById('fread');

elem.addEventListener('change', function(e){
	
	// FileListオブジェクトの先頭
	var fobj = elem.files[0];
	
	var freader = new FileReader();
	
	freader.addEventListener('load', function() {
		
		var out = document.getElementById('out');
		out.value = freader.result; // 表示
		
	}, true);

	// ファイル読み込み
	freader.readAsText(fobj);

}, true);

以下で、少しずつコードを見ていきます。

changeイベントのイベントハンドラを設定

var elem = document.getElementById('fread');

elem.addEventListener('change', function(e){


}, true);

ファイル選択ダイアログの「change」イベント発生時のイベントハンドラを設定しています。

Fileオブジェクトを取得

	// FileListオブジェクトの先頭
	var fobj = elem.files[0];

elemのfilesプロパティでFileListオブジェクトが参照できます。

１つのファイルを参照するため、先頭要素を指定しています。

「elem.files[0]」と指定することで先頭のFileオブジェクトが取得できます。

FileReaderオブジェクトのloadイベントハンドラを設定

	var freader = new FileReader();
	
	freader.addEventListener('load', function() {
		
		var out = document.getElementById('out');
		out.value = freader.result; // 表示
		
	}, true);

FileReaderオブジェクトを作成し、

'load'イベント時のイベントリスナーを設定します。

FileReaderオブジェクトの'load'イベントは、 ファイルの読み込みが完了した時点で発生します。

ファイルの読み込みが完了してから、textarea要素にファイルの内容を表示します。

ファイルの内容は、FileReaderオブジェクトのresultプロパティで参照できます。

ファイルの読み込み開始

	// ファイル読み込み
	freader.readAsText(fobj);

実際にテキストファイルを読み込むのは readAsText()メソッドです。

引数には、Fileオブジェクトを指定します。

文字コードを指定する場合は、次のように指定します。 （デフォルトはUTF-8です）

freader.readAsText(fobj, 'UTF-8');

以上がJavaScriptのコード解説となります。

分解して見て行けば、それほど難しくはありません。