FileReader
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
FileReader
オブジェクトを使用すると、ウェブアプリケーションは、ユーザーのコンピューターに保存されているファイル(または生のデータバッファー)の内容を非同期に読み取ることができます。File
または Blob
オブジェクトを使用して、読み込むファイルまたはデータを指定します。
File オブジェクトは、<input>
要素を使用してファイルを選択した結果として返される FileList
オブジェクト、またはドラッグ & ドロップ操作の DataTransfer
オブジェクトから取得することができます。
FileReader
は、ユーザーが HTML の <input type="file">
要素を使って、あるいはドラッグ & ドロップで明示的に選択したファイルの内容にのみアクセスすることができます。ユーザーのファイルシステムからパス名でファイルを読み込むために使用することはできません。クライアントのファイルシステム上のファイルをパス名で読み込むには、ファイルシステムアクセス API を使用してください。サーバー側のファイルを読み込むには、標準的な Ajax ソリューションを使用し、ドメインをまたがって読み込む場合は CORS 許可を取得してください。
メモ: この機能はウェブワーカー内で利用可能です。
コンストラクター
FileReader()
-
新しく作成された
FileReader
を返します。
詳細や例についてはウェブアプリケーションからのファイルの使用を参照してください。
インスタンスプロパティ
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()
でイベントリスナーを取り外してください。
仕様書
Specification |
---|
File API # APIASynch |
ブラウザーの互換性
BCD tables only load in the browser