HTML5筆記–Object URL
9 | 54,452 |
相信大家對於Data URI已不陌生,這回再介紹另一個HTML5的好東西 --- Object URL。
Data URI的格式為="data:image/gif;base64,R0lGOD....",Object URL則是"blob:"再串上網址以及GUID,例如: blob:http%3A//www.darkthread.net/c94d498b-7818-49b3-8e79-d3959938ba0f
大家應該已經注意到一點明顯差異 -- Object URL不像Data URI包含內容的Base64編碼,不管背後代表的File或Blob物件有多大,都只有一個短短的GUID,真正的內容被儲存在瀏覽器記憶體中,Object URL像個號碼牌,憑著它可以向瀏覽器提領內容。換個角度,http%3A//www.darkthrad.net/c94d498b-7818-49b3-8e79-d3959938ba0f的形式,有點像是跟http: //www.darkthread.net網站取得名為c94d498b-7818-49b3-8e79-d3959938ba0f的資源,但讀取時不需真的發出HTTP Request,直接由瀏覽器提取即可。由於物件內容被儲存在瀏覽器記憶體,註定了Object URL的生命週期得緊緊地跟網頁綁在一起,就像JavaScript變數一般,需等到網頁載入後,透過URL.createObjectURL()為File或Blob物件建立Object URL,網頁結束後自動失效,或是確定不要後呼叫URL.revokeObjectURL()主動將其註銷節省記憶體。(補充: File物件的使用方式可參考從桌面拖拉檔案到網頁、檔案上傳進度條)
Object URL如同標準URL,可以套用在原本使用URL的場合,例如: <img> src、<a> href,甚至當成$.ajax()的下載來源,在應用上比Data URI廣泛。來看看兩個有趣的範例:
[瀏覽器版本需求: 依循往例,IE9繼續哭哭,IE10+與其他瀏覽器都已支援]
【以JavaScript產生可下載檔案】
如以下示範,在<textarea>輸入文字,將其轉為Blob物件後建立Object URL,產生<a href="object_url" download="file_name">的下載連結,可將剛才輸入的文字匯出成檔案,很酷吧! 而按下註銷鈕後Object URL將被註銷,再下載檔案時就會失敗。Live Demo
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>HTML5 Blob URL應用-產生可下載檔案</title>
<style>
.revoke { text-decoration: line-through; }
</style>
</head>
<body>
<div>
<textarea id='taText' style='width: 300px; height: 50px;'>
是程式問題,但程式問題不等於程式設計師的問題。
是網頁問題,但網頁問題不等於網頁攻城獅的問題。
</textarea>
<br />
<input type="button" id='btnGenFile' value='產生檔案' />
<input type="button" id="btnRevokeUrl" value='註銷Blob URL' />
<br />
<a id='aDownload'></a>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script>
$(function () {
var $link = $("#aDownload");
$('#btnGenFile').click(function() {
var blob = new Blob([$("#taText").text()],
{ type:"application/octect-stream" });
var blobUrl = URL.createObjectURL(blob);
var fileName = "words.txt";
$link.attr({ href: blobUrl, download: fileName })
.text(fileName).removeClass("revoke");
});
$('#btnRevokeUrl').click(function() {
URL.revokeObjectURL($link.attr("href"));
$link.addClass("revoke");
});
});
</script>
</body>
</html>
【模擬XHR下載來源】
第二個示範也很有趣,我寫了一段$.get()由指定的網址下載內容,顯示於下方<textarea>。第一次先輸入httq:jsbin.com/xocul(網頁在jsbin.com執行時,URL必須是jsbin.com的網址,否則會違反XHR資安原則拒絕存取),按鈕後可取回該網址的HTML。接著,改用<input type="file">選取本機檔案,使用HTML5 File API取得該檔案的File物件,用URL.createObjectURL()轉成URL當成$.get()的URL參數,按鈕後XHR成功讀出本機檔案的內容並顯示在下方。Live Demo
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>HTML5 Blob URL應用-XHR網址來源</title>
<style>
</style>
</head>
<body>
<div>
<input type="file" id="fileSelector" />
<br />
URL: <input type="text" id="txtUrl" style="width: 60%"/>
<br />
<input type="button" id='btnReadFile' value='XHR讀取檔案' />
<br />
<textarea id="taDisplay" style="width: 80%; height: 50px;"></textarea>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script>
$(function () {
var $link = $("#aDownload");
$("#fileSelector").change(function(e) {
var file = e.target.files[0];
$("#txtUrl").val(URL.createObjectURL(file));
});
$('#btnReadFile').click(function() {
$.get($("#txtUrl").val(), function(res) {
$("#taDisplay").text(res);
}, "text");
});
});
</script>
</body>
</html>
學會愈多新武器,愈覺得HTML5有趣,Rock~ :P
Comments
# by 匿名
確實很酷,直接使用 javascript 產生可下載檔案
# by Loter
Object URL如果標準URL,可以套用在原本使用URL的場合 是說Object URL如果是標準URL時才能套用在原本使用URL的場合之意嗎?
# by Jeffrey
to Loter, Object URL如"同"標準URL,抱歉又打錯字了 orz。謝謝提醒。
# by 匿名
請問這行應該要這樣寫嗎? var blob = new Blob([$("#taText").val()], { type:"application/octect-stream" });
# by Jeffrey
to 匿名, 關於TextArea該用text()或val(),可以參考這篇: http://blog.darkthread.net/post-2009-06-11-jquery-textarea-val-or-text.aspx
# by Jhon
您好 想問一下 我想下載這個影片 但是一直抓不他的真實位置 http://ani.gamer.com.tw/animeVideo.php?sn=6001# 他用到了 黑暗大大上方所提到的blob格式 blob:http%3A这种格式的网址 blob:http%3A//ani.gamer.com.tw/f4e71c20-b422-471d-a14d-3893f0eb2d6c 請問該怎麼樣做才能把他載下來呢 您提到的範例是文字形式的 而想把他下載成 視頻型式的該怎麼做呢 我有用firefox+downloadhelp套件 去載 可是載來的東西都只有 48 Byte 檔案格式是 filename.mp4.part 不知道是什麼原因 請問如果你知道該如何做 能給我一點方向嗎 謝謝
# by Jeffrey
to Jhon, 看了一下, 影片是用video/MP2T格式以串流方式一小段一小段傳送, 並不是用BLOB整段下載回來, 建議用MP2T關鍵字找現成工具.
# by bobby
blob:https://video.friday.tw/883748d5-5c6c-4f01-a4bc-94b38bec5610 可以幫忙看一下這種要怎麼下載下來嗎 弄了好久都沒辦法
# by Jeffrey
to bobby, Object URL 是一種由程式將資料存入瀏覽器記憶體再透過 URL 存取的概念,實務上應不會將整部影片存進記憶體,多會分段處理,故很難用單一 URL 下載整部影片,而再深入研究形同破解商業影音網站,恐已偏離技術討論範疇。