FileReader オブジェクトを使うと、ユーザのコンピュータ内にあるファイル（もしくはバッファ上の生データ）を Web アプリケーションから非同期的に読み込むことが出来ます。読み込むファイルやデータは File ないし Blob オブジェクトとして指定します。
File オブジェクトを取得するには、ユーザが <input> 要素でファイルを選択した際に得られる FileList オブジェクト、またはドラッグ＆ドロップによる DataTransfer オブジェクト、他には HTMLCanvasElement の mozGetAsFile() API を用いると良いでしょう。
コンストラクタ
FileReader()- 新しく作成された
FileReaderを返します。
詳細や例については Web アプリケーションからファイルを扱う を参照してください。
プロパティ
FileReader.error読取専用- ファイルの読込中に生じたエラーを示す
DOMErrorです。 FileReader.readyState読取専用FileReaderの状態を表す数値です。次のうちの一つが入ります:EMPTY0まだデータは何も読み込まれていません。 LOADING1データの読み込み中です。 DONE2読込処理がすべて終了しました。 FileReader.result読取専用- 読み込んだファイルの内容です。このプロパティは読み込みが終了した後に有効になり、プロパティのデータ型は読込処理を行うメソッドによって変わります。
イベントハンドラ
FileReader.onabortabortイベントのハンドラです。読込処理が中断されたときにイベントが発生します。FileReader.onerrorerrorイベントのハンドラです。読込中にエラーが生じたときにイベントが発生します。FileReader.onloadloadイベントのハンドラです。読込が成功したときにイベントが発生します。FileReader.onloadstartloadstartイベントのハンドラです。読込が開始されたときにイベントが発生します。FileReader.onloadendloadendイベントのハンドラです。読込が（成功・失敗によらず）終了したときにイベントが発生します。FileReader.onprogressprogressイベントのハンドラです。Blobコンテンツの読込中にイベントが発生します。
注釈： FileReader は EventTarget を継承しているため、これらのイベントはすべて addEventListener メソッドでも受け取ることが出来ます。
メソッド
FileReader.abort()- 読込処理を中断します。結果として
readyStateはDONEに変わります。 FileReader.readAsArrayBuffer()- 指定された
Blobオブジェクトを読み込みます。終了後の resultプロパティには、ファイルのデータを示すArrayBufferが格納されます。 FileReader.readAsBinaryString()- 指定された
Blobオブジェクトを読み込みます。終了後のresultプロパティには、生のバイナリデータが文字列として格納されます。 FileReader.readAsDataURL()- 指定された
Blobオブジェクトを読み込みます。終了後のresultプロパティには、ファイルのデータを示すdata:URL が格納されます。 FileReader.readAsText()- 指定された
Blobオブジェクトを読み込みます。終了後のresultプロパティには、ファイルの内容をテキストとして読み取った文字列が格納されます。
仕様
| 仕様 | 状況 | 備考 |
|---|---|---|
| File API FileReader の定義 |
草案 | Initial definition. |
ブラウザ実装状況
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 機能 | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | 3.6 (1.9.2)[1] | 7 | (有) | 10[2] | 12.02[3] | 6.0 |
| Web Workers 内でのサポート | 46 (46) | (有) | (有) | 未サポート | (有) | 未サポート |
| 機能 | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 32 | 3 | (有) | 10 | 11.5 | 6.1 |
| Web Workers 内でのサポート | 46 (46) | (有) | (有) | 未サポート | (有) | 未サポート |
[1] Gecko 2.0 beta 7 (Firefox 4.0 beta 7) 以前では、以下に示す Blob パラメータはすべて File パラメータでした。現在では仕様通りに修正されています。Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) 以前では FileReader.error プロパティは FileError オブジェクトを返します。現在では最新の FileAPI 草案通りに修正され、DOMError オブジェクトを返します。
[2] IE9 には File API Lab があります。
[3] Opera 11.1 では部分的にサポートされています。