最終更新:2017-10-04 (水) 16:46:59 (2388d)  

File API/FileReader
Top / File API / FileReader

http://www.w3.org/TR/FileAPI/#dfn-filereader

interface FileReader: EventTarget {

	  // async read methods
	  void readAsArrayBuffer(Blob blob);
	  void readAsText(Blob blob, optional DOMString encoding);
	  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 DOMError error;

	  // event handler attributes
	  [TreatNonCallableAsNull] attribute Function? onloadstart;
	  [TreatNonCallableAsNull] attribute Function? onprogress;
	  [TreatNonCallableAsNull] attribute Function? onload;
	  [TreatNonCallableAsNull] attribute Function? onabort;
	  [TreatNonCallableAsNull] attribute Function? onerror;
	  [TreatNonCallableAsNull] attribute Function? onloadend;

	};

用途

  • ファイルのドラッグ＆ドロップや、アップロード前の画像ファイルのプレビュー
↑

例 

var reader = new FileReader();
reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
↑

メソッド

  • FileReader.readAsText?(Blob|File, opt_encoding) - result プロパティにはファイル/ブロブ データがテキスト文字列として格納されます。デフォルトでは、この文字列は「UTF-8」としてデコードされます。オプションのエンコード パラメータを使用すると、他の形式を指定できます。
  • FileReader.readAsDataURL(Blob|File) - result プロパティにはデータ URL としてエンコードされたファイル/ブロブ データが格納されます。
  • FileReader.readAsArrayBuffer(Blob|File) - result プロパティには、ファイル/ブロブ データが ArrayBuffer オブジェクトとして格納されます。
↑

Mozilla

  • FileReader.readAsBinaryString?(Blob|File) - result プロパティにはファイル/ブロブ データがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。
↑

ハンドラ

↑

関連




検索：