FileReader オブジェクトを使うと、ユーザーのコンピューター内にあるファイル (もしくはバッファ上の生データ) をウェブアプリケーションから非同期的に読み込むことが出来ます。読み込むファイルやデータは File
ないし Blob
オブジェクトとして指定します。
File オブジェクトを取得するには、ユーザーが <input>
要素でファイルを選択した際に得られる FileList
オブジェクト、またはドラッグ&ドロップによる DataTransfer
オブジェクト、他には HTMLCanvasElement
の mozGetAsFile()
API を用いると良いでしょう。
註: この機能は Web Workers 内で利用可能です。
コンストラクター
FileReader()
- 新しく作成された
FileReader
を返します。
詳細や例については ウェブアプリケーションからファイルを扱う を参照してください。
プロパティ
FileReader.error
読取専用- ファイルの読込中に生じたエラーを示す
DOMError
です。 FileReader.readyState
読取専用FileReader
の状態を表す数値です。次のうちの一つが入ります:EMPTY
0
まだデータは何も読み込まれていません。 LOADING
1
データの読み込み中です。 DONE
2
読込処理がすべて終了しました。 FileReader.result
読取専用- 読み込んだファイルの内容です。このプロパティは読み込みが終了した後に有効になり、プロパティのデータ型は読込処理を行うメソッドによって変わります。
イベントハンドラー
FileReader.onabort
abort
イベントのハンドラーです。読込処理が中断されたときにイベントが発生します。FileReader.onerror
error
イベントのハンドラーです。読込中にエラーが生じたときにイベントが発生します。FileReader.onload
load
イベントのハンドラーです。読込が成功したときにイベントが発生します。FileReader.onloadstart
loadstart
イベントのハンドラーです。読込が開始されたときにイベントが発生します。FileReader.onloadend
loadend
イベントのハンドラーです。読込が(成功・失敗によらず)終了したときにイベントが発生します。FileReader.onprogress
progress
イベントのハンドラーです。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
プロパティには、ファイルの内容をテキストとして読み取った文字列が格納されます。
イベント
addEventListener()
を使用するか、このインターフェイスの onイベント名
プロパティにイベントリスナーを代入するかして、これらのイベントを待ち受けします。
abort
- プログラムが
FileReader.abort()
を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。
onabort
プロパティ経由でも利用できます。 error
- エラーのために読み取りが失敗したときに発生します。
onerror
プロパティ経由でも利用できます。 load
- 読み取りが正常に完了したときに発生します。
onload
プロパティ経由でも利用できます。 loadend
- 正常かどうかにかかわらず、読み取りが完了したときに発生します。
onloadend
プロパティ経由でも利用できます。 loadstart
- 読み取りが開始されたときに発生します。
onloadstart
プロパティ経由でも利用できます。 progress
- データの読み取り時に定期的に発生します。
onprogress
プロパティ経由でも利用できます。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
File API FileReader の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
FileReader | Chrome 完全対応 7 | Edge 完全対応 あり | Firefox
完全対応
3.6
| IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
abort | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
abort event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
error | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox
完全対応
3.6
| IE
完全対応
10
| Opera 完全対応 11 | Safari
完全対応
6
| WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
32
| Opera Android 完全対応 11 | Safari iOS
完全対応
6.1
| Samsung Internet Android ? |
error event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
load event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
loadend event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
loadstart event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
onabort | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
onerror | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
onload | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
onloadend | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
onprogress | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
progress event | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
readAsArrayBuffer | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 12 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 12 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
readAsBinaryString | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 未対応 なし | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
readAsDataURL | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
32
| Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
readAsText | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
readyState | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
result | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android ? |
Available in workers | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 46 | IE 未対応 なし | Opera 完全対応 11 | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 46 | Opera Android 完全対応 11 | Safari iOS 未対応 なし | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実装ノートを参照してください。
- 実装ノートを参照してください。