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 許可を取得してください。

メモ: この機能はウェブワーカー内で利用可能です。

EventTarget FileReader

コンストラクター

FileReader()

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

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

インスタンスプロパティ

FileReader.error 読取専用

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

FileReader.readyState 読取専用

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

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

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

インスタンスメソッド

FileReader.abort()

読み込み処理を中断します。結果として readyStateDONE に変わります。

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
FileReader
FileReader() constructor
abort
abort event
error
error event
load event
loadend event
loadstart event
progress event
readAsArrayBuffer
readAsBinaryString
Deprecated
readAsDataURL
readAsText
readyState
result
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Deprecated. Not for use in new websites.
See implementation notes.
Has more compatibility info.

関連情報