在上一篇介紹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 : Data URI and Object URL</title>
</head>
<body>
<div>
<p>Please select a file</p>
<input type="file" id="inputFile" />
<p>Data URI:</p>
<textarea id="displayDataUri" style="height: 200px;width:500px;"></textarea>
<p>Object URL:</p>
<a id="displayObjectUri"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var inputFile = $("#inputFile");
var displayDataUri = $("#displayDataUri");
var displayObjectUri = $("#displayObjectUri");
inputFile.change(function (e) {
var file = e.target.files[0];
GetDataURI(file, function (dataURL) {
displayDataUri.text(dataURL);
});
var objUrl = URL.createObjectURL(file);
displayObjectUri.prop('download', file.name);
displayObjectUri.prop('href', objUrl);
displayObjectUri.html(objUrl);
});
function GetDataURI(file, callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
執行結果如下所示:
留言
張貼留言