ファイルの内容を取得するには？

ファイルの内容を取得するには？

解説

FileReaderオブジェクトを利用することで、ファイルの内容を非同期で取得することができます。

以下はテキストとして読み込む単純な例です。

// fは取得したFileオブジェクト、resultAreaは結果表示用の領域
var reader = new FileReader();
reader.onload = function(){
 resultArea.innerHTML = reader.result;
}
reader.readAsText(f,"Shift_JIS");

Fileオブジェクトの参照を取得するまでは「input要素で選択されたファイルの属性を取得するには？」と同じです。

まずFileReaderオブジェクトを新たに生成し、そのonloadイベントハンドラに読み込みが完了した時点で呼び出される処理を記述します。読み込み完了時には、FileReaderオブジェクトのresult属性に読み込んだデータが格納されているので、ここでは表示用の領域に設定して表示させています。

読み込み処理の起動はそのあとの「readAsText(file,[encoding])」メソッドで行います。読み込むファイルを指定するため、あらかじめ取得したFileオブジェクトを引数として渡します。

「readAsText(file,[encoding])」の省略可能な第2引数にはテキストのエンコーディングをIANA名で指定します。省略した場合、ファイルのMIMEタイプにエンコーディングが指定してあれば（例：「text/plain; charset=shift_jis」）そのエンコーディングで、そうでなければUnicodeとして読み込まれます。

ファイル内容の格納形式に応じたメソッドがほかにも存在します。詳細は「File API関連メソッド、属性、定数、イベント一覧」を参照ください。

FileReaderは非同期読み込みを行うので、メソッド自体はすぐに終了して、読み込みの処理はバックグラウンドで並行して行われ、完了時に、指定したイベントハンドラ（ここではonload）が呼ばれます。

関連項目

• input要素で選択されたファイルの属性を取得するには？
• File API関連メソッド、属性、定数、イベント一覧