跳到主要內容

發表文章

目前顯示的是 8月, 2018的文章

HTML5 : Object URL

在上一篇介紹HTML5 File API的文章中 提到Data URI是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"， 範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。 這次的文章主要是介紹運用Object URL將檔案儲存在瀏覽器。過去我們往往都會透過後端的Web API 將檔案路徑傳送到前端link或img元素，以便讓使用者下載或瀏覽，但這有一些問題，像是縮圖殘留，這時就是必須自己去寫一段Code清理Cache。如今我們可以透過HTML5 Object URL將檔案儲存在瀏覽器，而且由於檔案物件的生命週期與網頁綁在一起，所以當網頁被關閉，這些檔案物件就會被釋放，因此我們自然可以不用去處理縮圖殘留的問題。 事實上Object URL的儲存機制就是利用GUID向瀏覽器提取檔案物件，其而格式為"blob:<url>;<GUID>"， 範例:"blob:https://www.myblogger.com/e75c76a2-138a-4b17-b9f6-029199e3985f" Object URL 程式碼範例如下所示: 1. 首先，在Input註冊Chang事件以便取得File。 2. 我們利用URL.createObjectURL去建立ObjectURL，以及取得ObjectURL String。 3. 最後，將得到的ObjectURL String丟到link 元素，此時我們可以透過download屬性指定下載時的檔案名稱。 ※ 如果想要使連結失效並且釋放檔案物件，可以呼叫URL.revokeObjectURL來註銷ObjectURL。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>
張貼留言
閱讀完整內容

HTML5 : File API

今天我們示範使用HTML5 File API來讀取檔案內容。雖然市面上有很多好用且功能又強大的File Uploader ，但是骨子裡還是用HTML5 File API，所以不妨多去了解一些HTML5的東西對於前端開發絕對是有益處的。 File API的幾個重要的核心類別 : Blob(Binary Large Object): 表示二進制資料，此外還可以設定MIME類型。 File: 表示檔案且繼承於Blob，但與Blob不同的是它增加name、lastModified、lastModifiedDate、webkitRelativePath等屬性。 FileList: 表示 files的集合。 FileReader: 以非同步的方式讀取檔案內容，以下幾種方法與事件 : 1. readAsArrayBuffer：讀取檔案後，並回傳 ArrayBuffer 物件。 2. readAsBinaryString：讀取檔案後，並回傳 Binary String 。 (非標準，建議不要使用) 3. readAsDataURL：讀取檔案後，並回傳 DataURI 。 4. readAsText：讀取檔案後，並傳回文字內容(預設UTF-8)。 5. onload : 讀取完檔案後，所執行的事件。 6. abort：取消讀取。 ※Data URI 是一種文字型態的檔案格式，其格式為"data:<mime type>;base64,<data>"， 範例:"data:image/png;base64,PCFET0NUWVB..." ，而Data URI 的好處就是它可以直接寫入 HTML，且img元素可以接受Data URI格式。 ※若要以同步的方式讀取檔案請使用FileReaderSync  File API 程式碼範例如下所示: 1. 首先，在Input註冊Chang事件以便取得File。 2. 建立FileReader物件，並且註冊onload事件用於接收回傳的DataURL。 3. 執行readAsDataURL來讀取File，讀取完檔案後會觸發onload事件。 <!DOCTYPE html> <head> <meta c
張貼留言
閱讀完整內容