テキストファイルの内容を読み出す
続いてファイルの内容を読み出してみましょう。最初に、テキストファイルの内容を読み出してブラウザー上に表示します。
一般的にプログラムからファイルへアクセスするには以下の手順を採ります。
- ファイルを特定（ファイル名とパスを決定）
- ファイルをオープン
- ファイル内容に対して読み込みや書き込みの処理を実行する
- ファイルをクローズ
これに対してFile APIは2のファイルオープン、4のファイルクローズの手続きが必要ありません。また、File APIはファイルの読み込み処理は同期でなく非同期で処理される点も異なります。
ファイルデータはnew FileReader()としてFileReaderオブジェクト（インスタンス）を生成し、readAsText()メソッドで読み込みます。
readAsText()メソッドの前にファイルの読み込みが完了したときの処理を記述します。ファイルが正常に読み込まれるとFileReaderオブジェクトでonloadイベントが発生するので、イベントハンドラに読み込みが完了したときの処理を設定します。イベントハンドラにはEventオブジェクトが渡され、読み込まれたファイルの内容がtarget.resultプロパティに入ります。
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById("result").innerHTML = evt.target.result;
}
イベントハンドラの設定が終わったらreadAsText()メソッドでファイルを読み込みます。readAsText()の第1引数にはファイルオブジェクト、第2引数には読み込むファイルの文字コードを指定します。指定した文字コードとファイルで使用されている文字コードが異なると文字化けするので注意してください。
reader.readAsText(fileData, "utf-8");
ここまでをまとめたのがサンプル3です。テキストファイル（文字コードはUTF-8）を選択するとファイルの内容が表示されます。
ファイル選択ボタンをクリックする
テキストファイルを選択する
「ファイル内容を表示」ボタンをクリックすると
テキストファイルの内容が表示される。ファイルで使用されている文字コードとスクリプトで指定した文字コードが一致していないと文字化けする
<h1>テキストファイルの内容を表示する</h1>
<form action="./test.cgi" method="get">
<input type="file" id="myFile" />
<input type="button" id="displayFileData" value="ファイル内容を表示" />
</form>
<div id="result"></div>
<script>
document.getElementById("displayFileData").addEventListener("click", function(){
var fileData = document.getElementById("myFile").files[0];
if (fileData.type != "text/plain"){
document.getElementById("result").innerHTML = "プレーンテキストを選択してください";
return;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById("result").innerHTML = evt.target.result; // 内容をページ上に表示
}
reader.readAsText(fileData, "utf-8"); // 文字コードをUTF-8として読み込む
}, true);
</script>
