最終更新:2017-10-04 (水) 16:46:59 (2368d)
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 の範囲の整数で表されます。