The document discusses the File API which allows reading and manipulating files in JavaScript. It can be used to create thumbnail previews of images being uploaded or save file references while offline. The File API includes the Blob, File, and FileReader objects. Blob allows slicing files, File provides file metadata, and FileReader can read files as text, data URLs, etc. Support exists across major browsers except Internet Explorer. Examples demonstrate using these objects to read and access file contents in JavaScript.

1. Jason

2. 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.

3. Browser Support
 File API are supported in all major
browsers. except Internet Explorer.
 Resources:http://caniuse.com/fileapi

4. File API
 Blob - Allows for slicing a file into byte ranges.
 File
 FileReader

5. File API - Blob
var b = new Blob() ;
var b =new Blob(['AAA', 'BBB'],{ 'type': 'text/plain'}) ;
b.type
b.size.
b.slice(start, length)

6. File API - File
 var file = $(“input[type=file]")[0].files[0];
 file.name
 file.type
 file.size.
 file.slice(start, length)

7. 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].

8. 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.

9. File API - FileReader
 FileReader.readAsDataURL(Blob|File)
 The result property will contain the file/blob's
data encoded as a data URL

10. 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,iVBORw0KGgoAAAANS
UhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQM
YgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

11. Data URI scheme
 data:image/png;base64,iVBORw0KGgoAAAANSUh
EUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQ
MYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
 data - 取得 data 的協定名稱
 image/png – data 類型名稱
 base64 – data 的編碼方法
 iVBOR.... - 編碼後的 data
 : , ; - data URI scheme 指定的分隔符號

12. Data URI scheme
 Data URI scheme 也可以在 CSS 中使用，例
如：
 body { background-image:
url("data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvM
AhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQ
mCC");}

13. File API - FileReader
 FileReader.onloadstart // 讀取操作開始時觸發
 FileReader.onprogress // 讀取操作過程中觸發
 FileReader.onabort // 讀取操作被中斷時觸發
 FileReader.onerror // 讀取操作失敗時觸發
 FileReader.onload // 讀取操作成功時觸發
 FileReader.onloadend // 讀取操作完成時觸發
(不論成功還是失敗)

14. 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.

15. File API - Example
var file = $("#file")[0].files[0];
var reader = new FileReader();
reader.readAsText (file);
reader.onload = function(){
$("#content").val(reader.result);
};

16. 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);

17. Reference
 http://www.w3.org/TR/file-upload/#dfn-
Blob
 http://www.w3.org/TR/FileAPI/#dfn-file