DOM

インターフェイス

FileReader インターフェイス

  編集:2022.02.06 by T.A.

MS

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

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

重要事項: FileReader は、ユーザーの(リモートの)システムから安全な方法でのみファイルの内容を読み取るために使用されます。単にファイル・システムからパス名でファイルを読み込むためには使用できません。JavaScript でパス名でファイルを読み込むには、標準的な Ajax ソリューションを使用してサーバー・サイドのファイル読み込みを行い、クロスドメインでファイルを読み込む場合は CORS パーミッションを使用しなければなりません。

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

コンストラクター
fileReader= new FileReader()
新しく作成された FileReader を返します。

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

プロパティ
number= FileReader.readyState 読取専用
FileReader がいまの読み取り操作の現在の状態を返します。
file= instanceOfFileReader.result 読取専用
ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データのフォーマットは、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。
error= instanceOfFileReader.error 読取専用
ファイルの読み込み中に発生したエラーを表す DOMException
メソッド
instanceOfFileReader.abort()
読み込みを中断する。
instanceOfFileReader.readAsArrayBuffer(blob)
読み取り演算を起動する。指定された Blob ないし File オブジェクトの内容を読み込むために使用します。読み込み処理が終了すると readyState が DONE に変わり、loadend イベントが発行されます。
instanceOfFileReader.readAsBinaryString(blob)
非推奨。読み取り演算を起動する。読込処理が終了すると readyState は DONE に変わり、loadend イベントが生じます。
instanceOfFileReader.readAsDataURL(blob)
読み取り演算を起動する。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。
instanceOfFileReader.readAsText(blob[, encoding])
読み取り演算を起動する。読み取り操作が完了すると、readyState が DONE に変わり、loadend イベントが発生します。
イベント・ハンドラー
FileReader.onabort
abort(en-US)イベントのハンドラです。このイベントは、読み込み操作が中止されるたびにトリガされます。
FileReader.onerror
error イベントのハンドラーです。このイベントは、読み込み操作がエラーになるたびにトリガされます。
FileReader.onload
load イベントのハンドラです。このイベントは、読み込み操作が正常に完了するたびにトリガされます。
FileReader.onloadstart
loadstart(en-US)イベントのハンドラです。このイベントは、読み込みが開始されるたびにトリガされます。
FileReader.onloadend
loadend(en-US)イベントのハンドラです。このイベントは、 (成功または失敗のいずれかで) 読み込み操作が完了するたびにトリガされます。
FileReader.onprogress
progress(en-US)イベントのハンドラです。このイベントは、Blob コンテンツの読み込み中に発生します。
イベント
addEventListener() を使用するか、このインターフェイスの onイベント名 プロパティにイベント・リスナーを代入するかして、これらのイベントを待ち受けます。
abort
プログラムが FileReader.abort() を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。

onabort プロパティ経由でも利用できます。

error
エラーのために読み取りが失敗したときに発生します。

onerror プロパティ経由でも利用できます。

load
読み取りが正常に完了したときに発生します。

onload プロパティ経由でも利用できます。

loadend
正常かどうかにかかわらず、読み取りが完了したときに発生します。

onloadend プロパティ経由でも利用できます。

loadstart
読み取りが開始されたときに発生します。

onloadstart プロパティ経由でも利用できます。

progress
データの読み取り時に定期的に発生します。

onprogress プロパティ経由でも利用できます。


テスト
HTML:

ここに表示
スクリプト組み込み:



スクリプト:


スクリプト:



表示内容:
表示内容: