FileReader

FileReader オブジェクトを使うと、ユーザーのコンピューター内にあるファイル (もしくはバッファ上の生データ) をウェブアプリケーションから非同期的に読み込むことが出来ます。読み込むファイルやデータは File ないし Blob オブジェクトとして指定します。

File オブジェクトを取得するには、ユーザーが <input> 要素でファイルを選択した際に得られる FileList オブジェクト、またはドラッグ&ドロップによる DataTransfer オブジェクト、他には HTMLCanvasElementmozGetAsFile() 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 コンテンツの読込中にイベントが発生します。

FileReaderEventTarget を継承しているため、これらのイベントはすべて addEventListener メソッドでも受け取ることが出来ます。

メソッド

FileReader.abort()
読込処理を中断します。結果として readyStateDONE に変わります。
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 の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
FileReaderChrome 完全対応 7Edge 完全対応 ありFirefox 完全対応 3.6
補足
完全対応 3.6
補足
補足 Prior to Firefox 4, Blob parameters were File parameters.
IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
abortChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
abort eventChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
errorChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6
補足
完全対応 3.6
補足
補足 Prior to Firefox 13, the error property returned a FileError object.
補足 From Firefox 13 to Firefox 58, the error property returned a DOMError object.
補足 From Firefox 58, the error property returns a DOMException object.
IE 完全対応 10
補足
完全対応 10
補足
補足 The error property returns a DOMError object.
Opera 完全対応 11Safari 完全対応 6
補足
完全対応 6
補足
補足 The error property returns a DOMError object.
WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32
補足
完全対応 32
補足
補足 From Firefox 32 to Firefox 58, the error property returned a DOMError object.
補足 From Firefox 58, the error property returns a DOMException object.
Opera Android 完全対応 11Safari iOS 完全対応 6.1
補足
完全対応 6.1
補足
補足 The error property returns a DOMError object.
Samsung Internet Android ?
error eventChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
load eventChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
loadend eventChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
loadstart eventChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
onabortChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
onerrorChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
onloadChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
onloadendChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
onprogressChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
progress eventChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
readAsArrayBufferChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 12Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 12Safari iOS 完全対応 6.1Samsung Internet Android ?
readAsBinaryStringChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
readAsDataURLChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32
補足
完全対応 32
補足
補足 Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
readAsTextChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
readyStateChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
resultChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android ?
Available in workersChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 46IE 未対応 なしOpera 完全対応 11Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 46Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報