では、ファイルからデータを読み込ませてみましょう。まずは、テキストファイルからです。下のリスト欄に、script.jsの内容を掲載しておきます。テキストファイルを選択すると、その内容を読み込み表示します。ここではシフトJISのファイルを読み込むように設定してあります。他の文字コードだと文字化けするので注意してください。

<input type="file">からFileオブジェクトを取得するまでは先ほどの例と同じですね。ここでは、readfile関数でファイルの読み込み処理を行っています。

ファイルの読み込みは、まず「FileReader」というオブジェクトを作成します。これがファイル読み込みのための機能を持つオブジェクトです。テキストを読み込む場合は、このオブジェクトの「readAsText」メソッドを呼び出します。これは、

[FileReader].readAsText( [File] , [エンコード] );

このような形で呼び出します。が、これを実行しても、読み込んだテキストが返される、というようなわけではありません。ファイルの読み込み処理は、非同期で行われるのです。このため、ここではreadAsTextを呼び出して処理は一旦終了です。

後は、FileReaderに用意されているイベント属性に関数を設定し、処理が完了したところで発生するイベントを使って、読み込んだあとの処理をお行わせます。FileReaderには、以下のようなイベント属性が用意されています。

onloadstart――読み込み開始時のイベント
onprogress――読み込み作業中のイベント
onload――正常に読み込んだときのイベント
onabort――中断時のイベント
onerror――読み込みエラー時のイベント
onloadend――読み込み処理完了時のイベント

ここでは、正常に読み込んだ時とエラーが発生したときのonload/onerrorにそれぞれ関数を設定しておきました。

onloadイベントでは、event.targetでイベントの発生したFileReaderオブジェクトを取得し、その「result」プロパティから読み込んだテキストを得ることができます。後はこれを必要に応じて表示するなりするだけですね。

onerrorイベントでは、evt.targetの「error」プロパティでエラー内容を示すFileErrorオブジェクトが渡されます。そのcodeプロパティをチェックし、NOT_READABLE_ERRであれば、読み込みに失敗したエラーだとわかります。ここではalertでメッセージを表示させておきました。

とりあえず、これらのFileReaderにあるイベントの使い方がわかれば、読み込みに関する処理はひと通り実装できるようになります。

function dochange(event) {
	var file = event.target.files[0];
	if (file) {
		readfile(file);
	}
}

function readfile(file) {
	var reader = new FileReader();
	reader.readAsText(file,"sjis");
	reader.onload = loaded;
	reader.onerror = error;
}

function loaded(event) {
	var str = event.target.result;
	document.getElementById("msg").innerHTML = str;
}

function error(evt) {
	if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
		alert("ファイルが読めません！");
	}
}