SYNCERのロゴ
アイキャッチ画像

FileReader - データの読み込み

FileReaderは、FileBlobのデータを読み込むための機能を備えたインターフェイスです。

概要

名前
FileReader
継承
IDL
[Constructor, Exposed=(Window,Worker)]
interface FileReader: EventTarget {
  // async read methods
  void readAsArrayBuffer(Blob blob);
  void readAsBinaryString(Blob blob);
  void readAsText(Blob blob, optional DOMString label);
  void readAsDataURL(Blob blob);
  void abort();

  // states
  const unsigned short EMPTY = 0;
  const unsigned short LOADING = 1;
  const unsigned short DONE = 2;
  readonly attribute unsigned short readyState;

  // File or Blob data
  readonly attribute (DOMString or ArrayBuffer)? result;

  readonly attribute DOMException? error;

  // event handler content attributes
  attribute EventHandler onloadstart;
  attribute EventHandler onprogress;
  attribute EventHandler onload;
  attribute EventHandler onabort;
  attribute EventHandler onerror;
  attribute EventHandler onloadend;
};

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
仕様書
https://w3c.github.io/FileAPI/#dfn-filereader

チュートリアル

FileReaderの使用例です。

// Blob
var blob = new Blob( [ "SYNCER" ], { type: "text/plain" } ) ;

// Blobを読み込む
var fileReader = new FileReader() ;

fileReader.onload = function () {
	console.log( this.result ) ;		// "SYNCER"
}

fileReader.readAsText( newBlob ) ;

プロパティ

error

ファイルの読み込みで生じたエラーの内容をDOMExceptionで返します。

readyState

データの読み込みの状態を表す数値を返します。

result

読み込んだデータを返します。

メソッド

abort()

ファイルの読み込みを中止するメソッドです。

readAsArrayBuffer()

ファイルを、ArrayBufferとして読み込みます。

readAsBinaryString()

ファイルを、バイナリ文字列として読み込みます。

readAsDataURL()

ファイルを、Data URIとして読み込むメソッドです。

readAsText()

ファイルを、文字列として読み込みます。

定数

DONE

2を返します。この値は、データの読み込みが完了している状態を表します。

EMPTY

0を返します。この値は、データの読み込みをまだ開始していない状態を表します。

LOADING

この値は、データを読み込んでいる最中であることを表します。

イベント

onabort

データの読み込みを中断した時に発火します。

onerror

データの読み込みがエラーで失敗した時に発火します。

onload

データの読み込みが正常に完了した時に発火します。

onloadend

データの読み込みが成功か失敗に関わらず終了した時に発火します。

onloadstart

データの読み込みを開始した時に発火します。

onprogress

データの読み込み中に繰り返し発火します。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
FileReader 6.0+ 10+ 6.0+ 4.0+
abort() 6.0+ 10+ 6.0+ 4.0+
DONE 6.0+ 10+ 6.0+ 4.0+
EMPTY 6.0+ 10+ 6.0+ 4.0+
error 6.0+ 10+ 6.0+ 4.0+
LOADING 6.0+ 10+ 6.0+ 4.0+
onabort 6.0+ 10+ 6.0+ 4.0+
onerror 6.0+ 10+ 6.0+ 4.0+
onload 6.0+ 10+ 6.0+ 4.0+
onloadend 6.0+ 10+ 6.0+ 4.0+
onloadstart 6.0+ 10+ 6.0+ 4.0+
onprogress 6.0+ 10+ 6.0+ 4.0+
readAsArrayBuffer() 7+ 6.0+ 10+ 6.0+ 4.0+
readAsBinaryString() 6.0+× 6.0+ 4.0+
readAsDataURL() 6.0+ 10+ 6.0+ 4.0+
readAsText() 6.0+ 10+ 6.0+ 4.0+
readyState 6.0+ 10+ 6.0+ 4.0+
result 6.0+ 10+ 30+ 6.0+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。