FileReader

FileReader オブジェクトを使用すると、ウェブアプリケーションは、ユーザーのコンピュータに保存されているファイル (または生データバッファ) の内容を非同期に読み取ることができます。File または Blob オブジェクトを使用して、読み込むファイルまたはデータを指定します。

File オブジェクトは、<input> 要素を使用してファイルを選択した結果として返される FileList オブジェクト、ドラッグ＆ドロップ操作の DataTransfer オブジェクトから取得することができます。

FileReader は、ユーザーが HTML の <input type="file"> 要素を使って、あるいはドラッグ＆ドロップで明示的に選択したファイルのコンテンツにのみアクセスすることができます。ユーザーのファイルシステムからパス名でファイルを読み込むために使用することはできません。クライアントのファイルシステム上のファイルをパス名で読み込むには、ファイルシステムアクセス API (en-US) を使用してください。サーバー側のファイルを読み込むには、標準的な Ajax ソリューションを使用し、クロスドメインで読み込む場合は CORS 許可を取得してください。

注: この機能は Web Worker 内で利用可能です

コンストラクター

FileReader(): 新しく作成された FileReader を返します。

詳細や例についてはウェブアプリケーションからのファイルの使用 (en-US)を参照してください。

プロパティ

FileReader.error 読取専用

ファイルの読み込み中に発生したエラーを表す DOMException。

FileReader.readyState 読取専用

FileReader の状態を示す数値。以下のいずれかになります。

名前	値	説明
`EMPTY`	`0`	まだデータは読み込まれていません。
`LOADING`	`1`	データは現在読み込み中です。
`DONE`	`2`	読み込みリクエストがすべて終了しました。

FileReader.result 読取専用

ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データのフォーマットは、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。

メソッド

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イベント名 プロパティにイベントリスナーを代入するかしてください。 FileReader が使用されなくなったら、メモリリークを防ぐために removeEventListener() でイベントリスナーを取り外してください。

abort: プログラムが FileReader.abort() を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。
error: エラーのために読み取りが失敗したときに発生します。
load: 読み取りが正常に完了したときに発生します。
loadend: 正常かどうかにかかわらず、読み取りが完了したときに発生します。
loadstart: 読み取りが開始されたときに発生します。
progress: データの読み取り時に定期的に発生します。

仕様書

Specification
File API # APIASynch

ブラウザーの互換性

BCD tables only load in the browser