FILE APIJason

INTRODUCTION

The File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline.

Browser Support

File API are supported in all major browsers. except Internet Explorer.

Resources:http://caniuse.com/fileapi

File API

Blob - Allows for slicing a file into byte ranges.

File

FileReader

File API - Blob

var b = new Blob() ; 

var b =new Blob(['AAA', 'BBB'],{ 'type': 'text/plain'}) ;

b.typeb.size.b.slice(start, length) 

File API - File

var file = $(“input[type=file]")[0].files[0];

file.name file.type file.size. file.slice(start, length)

File API - FileReader

FileReader.readAsBinaryString(Blob|File)

The result property will contain the file/blob's data as a binary string. Every byte is represented by an integer in the range [0..255].

File API - FileReader

FileReader.readAsText(Blob|File, opt_encoding)

The result property will contain the file/blob's data as a text string. By default the string is decoded as 'UTF-8'. Use the optional encoding parameter can specify a different format.

File API - FileReader

FileReader.readAsDataURL(Blob|File)

 The result property will contain the file/blob's data encoded as a data URL

Data URI scheme

http URI scheme<img src="http://www.hkpug.net/files/images/check.png"/>

data URI scheme<img

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

Data URI scheme data:image/

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC

data - 取得 data 的協定名稱

image/png – data 類型名稱

base64 – data 的編碼方法

iVBOR.... - 編碼後的 data

: , ; - data URI scheme 指定的分隔符號

Data URI scheme

Data URI scheme 也可以在 CSS 中使用，例如：

body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}

File API - FileReader

FileReader.onloadstart  // 讀取操作開始時觸發 FileReader.onprogress // 讀取操作過程中觸發 FileReader.onabort  // 讀取操作被中斷時觸發 FileReader.onerror  // 讀取操作失敗時觸發 FileReader.onload  // 讀取操作成功時觸發 FileReader.onloadend  // 讀取操作完成時觸發

( 不論成功還是失敗 )

File API – FileReader States

FileReader.EMPTY (Value = 0) ：No data has been loaded yet.

FileReader.LOADING (Value = 1) ： Data is currently being loaded

FileReader.DONE (Vlaue = 2) ： The entire read request has been completed.

File API - Example

var file = $("#file")[0].files[0];

var reader = new FileReader();

reader.readAsText (file);

reader.onload = function(){ $("#content").val(reader.result);};

File API - Blob

    var file = new Blob([" 這是建立 Blob 的內容 !!"],{ "type": "text/plain" });   

  var fileReader = new FileReader();

    fileReader.onload = function (event) {        console.log(' 新建 Blob  檔案內容： '+this.result);    } ;    fileReader.readAsText(file);

Reference

http://www.w3.org/TR/file-upload/#dfn-Blob

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