HTML5筆記–Object URL

相信大家對於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

歡迎推文分享:
Published 12 March 2014 07:25 AM 由 Jeffrey
Filed under:
Views: 34,067



意見

# 匿名 said on 11 March, 2014 08:38 PM

確實很酷,直接使用 javascript 產生可下載檔案

# Loter said on 22 July, 2014 02:20 AM

Object URL如果標準URL,可以套用在原本使用URL的場合

是說Object URL如果是標準URL時才能套用在原本使用URL的場合之意嗎?

# Jeffrey said on 22 July, 2014 07:57 PM

to Loter, Object URL如"同"標準URL,抱歉又打錯字了 orz。謝謝提醒。

# 匿名 said on 07 April, 2016 09:57 PM

請問這行應該要這樣寫嗎?

var blob = new Blob([$("#taText").val()], { type:"application/octect-stream" });

# Jeffrey said on 09 April, 2016 07:32 PM

to 匿名, 關於TextArea該用text()或val(),可以參考這篇:

blog.darkthread.net/post-2009-06-11-jquery-textarea-val-or-text.aspx

# Jhon said on 29 July, 2016 08:24 PM

您好

想問一下

我想下載這個影片

但是一直抓不他的真實位置

ani.gamer.com.tw/animeVideo.php

他用到了 黑暗大大上方所提到的blob格式

blob:http%3A这种格式的网址

blob:http%3A//ani.gamer.com.tw/f4e71c20-b422-471d-a14d-3893f0eb2d6c

請問該怎麼樣做才能把他載下來呢

您提到的範例是文字形式的

而想把他下載成 視頻型式的該怎麼做呢

我有用firefox+downloadhelp套件 去載

可是載來的東西都只有 48 Byte

檔案格式是    filename.mp4.part

不知道是什麼原因

請問如果你知道該如何做

能給我一點方向嗎

謝謝

# Jeffrey said on 29 July, 2016 09:52 PM

to Jhon, 看了一下, 影片是用video/MP2T格式以串流方式一小段一小段傳送, 並不是用BLOB整段下載回來, 建議用MP2T關鍵字找現成工具.

# bobby said on 24 October, 2017 08:52 AM

blob:video.friday.tw/883748d5-5c6c-4f01-a4bc-94b38bec5610

可以幫忙看一下這種要怎麼下載下來嗎 弄了好久都沒辦法

# Jeffrey said on 24 October, 2017 10:07 AM

to bobby, Object URL 是一種由程式將資料存入瀏覽器記憶體再透過 URL 存取的概念,實務上應不會將整部影片存進記憶體,多會分段處理,故很難用單一 URL 下載整部影片,而再深入研究形同破解商業影音網站,恐已偏離技術討論範疇。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2014>
SunMonTueWedThuFriSat
2324252627281
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication