FileReader オブジェクトを使用すると、Web アプリケーションは、ユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定します。
File オブジェクトは、<input> 要素を使用してファイルを選択した結果として返される FileList オブジェクト、ドラッグ＆ドロップ操作の DataTransfer オブジェクト、または HTMLCanvasElement 上の mozGetAsFile() API から取得することができます。
重要事項: FileReader は、ユーザーの (リモートの) システムから安全な方法でのみファイルの内容を読み取るために使用されます。単にファイルシステムからパス名でファイルを読み込むためには使用できません。JavaScript でパス名でファイルを読み込むには、標準的な Ajax ソリューションを使用してサーバーサイドのファイル読み込みを行い、クロスドメインでファイルを読み込む場合は CORS パーミッションを使用しなければなりません。
註: この機能は Web Workers 内で利用可能です。
コンストラクター
FileReader()- 新しく作成された
FileReaderを返します。
詳細や例については Web アプリケーションからのファイルの使用 を参照してください。
プロパティ
FileReader.error読取専用- ファイルの読み込み中に発生したエラーを表す
DOMException。 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属性にファイルの内容がテキスト文字列として格納されます。オプションでエンコーディング名を指定することができます。
イベント
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 完全対応 12 | Firefox
完全対応
3.6
| IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.0 |
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 完全対応 12 | 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 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
load event | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
loadend event | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
loadstart event | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox
完全対応
79
| IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
79
| 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 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.0 |
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 完全対応 12 | 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 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 32 | Opera Android 完全対応 12 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.0 |
readAsBinaryString | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 未対応 なし | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.0 |
readAsDataURL | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android
完全対応
32
| Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.0 |
readAsText | Chrome 完全対応 7 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 10 | Opera 完全対応 11 | Safari 完全対応 6 | WebView Android 完全対応 ≤37 | Chrome Android 完全対応 18 | Firefox Android 完全対応 32 | Opera Android 完全対応 11 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.0 |
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 完全対応 ≤18 | Firefox 完全対応 46 | IE 未対応 なし | Opera 完全対応 11 | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 46 | Opera Android 完全対応 11 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。