FileReader

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 の状態を示す数値。以下のいずれかになります。
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 完全対応 12Firefox 完全対応 3.6
補足
完全対応 3.6
補足
補足 Prior to Firefox 4, Blob parameters were File parameters.
IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0
abortChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 あり
abort eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 あり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 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
load eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
loadend eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
loadstart eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 79
完全対応 79
未対応 ? — 79
補足
補足 loadstart event dispatches synchronously (should be asynchronously as per spec).
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 79
完全対応 79
未対応 ? — 79
補足
補足 loadstart event dispatches synchronously (should be asynchronously as per spec).
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 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0
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 完全対応 12Firefox 完全対応 あり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 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32Opera Android 完全対応 12Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0
readAsBinaryStringChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 未対応 なしOpera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0
readAsDataURLChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32
補足
完全対応 32
補足
補足 Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0
readAsTextChrome 完全対応 7Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 10Opera 完全対応 11Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 32Opera Android 完全対応 11Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.0
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 完全対応 ≤18Firefox 完全対応 46IE 未対応 なしOpera 完全対応 11Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 46Opera Android 完全対応 11Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

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

あわせて参照