File api

264 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

File api

  1. 1. Jason
  2. 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. 3. Browser Support File API are supported in all majorbrowsers. except Internet Explorer. Resources:http://caniuse.com/fileapi
  4. 4. File API Blob - Allows for slicing a file into byte ranges. File FileReader
  5. 5. File API - Blobvar b = new Blob() ;var b =new Blob([AAA, BBB],{ type: text/plain}) ;b.typeb.size.b.slice(start, length)
  6. 6. File API - File var file = $(“input[type=file]")[0].files[0]; file.name file.type file.size. file.slice(start, length)
  7. 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. 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. 9. File API - FileReader FileReader.readAsDataURL(Blob|File) The result property will contain the file/blobsdata encoded as a data URL
  10. 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. 11. Data URI scheme data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC data - 取得 data 的協定名稱 image/png – data 類型名稱 base64 – data 的編碼方法 iVBOR.... - 編碼後的 data : , ; - data URI scheme 指定的分隔符號
  12. 12. Data URI scheme Data URI scheme 也可以在 CSS 中使用,例如: body { background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
  13. 13. File API - FileReader FileReader.onloadstart // 讀取操作開始時觸發 FileReader.onprogress // 讀取操作過程中觸發 FileReader.onabort // 讀取操作被中斷時觸發 FileReader.onerror // 讀取操作失敗時觸發 FileReader.onload // 讀取操作成功時觸發 FileReader.onloadend // 讀取操作完成時觸發(不論成功還是失敗)
  14. 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. 15. File API - Examplevar file = $("#file")[0].files[0];var reader = new FileReader();reader.readAsText (file);reader.onload = function(){$("#content").val(reader.result);};
  16. 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. 17. Reference http://www.w3.org/TR/file-upload/#dfn-Blob http://www.w3.org/TR/FileAPI/#dfn-file

×