Your SlideShare is downloading. ×
0
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
File api
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

File api

102

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
102
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jason
  • 2. INTRODUCTION The File API could be used to create athumbnail preview of images as theyrebeing sent to the server, or allow an appto save a file reference while the user isoffline.
  • 3. Browser Support File API are supported in all majorbrowsers. 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 - Blobvar b = new Blob() ;var b =new Blob([AAA, BBB],{ type: text/plain}) ;b.typeb.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/blobsdata as a binary string. Every byte isrepresented 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/blobsdata as a text string. By default the string isdecoded as UTF-8. Use the optional encodingparameter can specify a different format.
  • 9. File API - FileReader FileReader.readAsDataURL(Blob|File) The result property will contain the file/blobsdata 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 <imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
  • 11. Data URI scheme data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 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,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
  • 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 beencompleted.
  • 15. File API - Examplevar file = $("#file")[0].files[0];var reader = new FileReader();reader.readAsText (file);reader.onload = function(){$("#content").val(reader.result);};
  • 16. File API - Blobvar 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

×