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.
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");}
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);