window.URL對象用法總結

window.URL 主要作用是讀取文件的字符串，在img或video等帶有src屬性的標簽上展示。

1. 靜態方法

objectURL = createObjectURL(object) //object是file或blob

從文件獲取url，這些文件可能來自本地硬盤從<input type="file" />選擇的文件，或者是ajax從服務器請求到內存里的。

revokeObjectURL(objectURL) //createObjectURL返回的objectURL

回收objectURL，釋放資源。因為objectURL不會自動回收，會和document一樣的周期，至頁面關閉。

2. URL對象可以讀取、修改查詢字符串

var parsedUrl = new URL('https://test.com?id=111');

// 111
console.log('parsedUrl' , parsedUrl, parsedUrl.searchParams.get("id"));

// https://test.com/?id=123v&name=test
console.log('parsedUrl' , parsedUrl.toString(), parsedUrl.searchParams.set("name" , 'test'));

3. URL.toString()和URL.href可以取得URL對象的url

let url = new URL('http://www.test.com/index.html')

// url.href http://www.test.com/index.html
// url.toString() http://www.test.com/index.html
console.log('url.href', url.href, 'url.toString()' , url.toString());

4. URL的應用場景

4.1 createObjectURL實現預覽圖片

<input type="file" id="file" multiple>
<div id="preview">圖片預覽</div>
<script>
    var preview = document.querySelector('#preview');
    var oFile = document.querySelector('#file');
    oFile.onchange = function(){
        var url = window.URL.createObjectURL(oFile.files[0]);
        // 創建預覽圖片
        var img = new Image();
        img.src = url;
        img.style.width = "80px";
        img.style.height = "80px";
        // 插入預覽圖片
        preview.appendChild(img);
    }
</script>

4.2 URL實現預覽視頻

<div>
  <video width="400" height="500" controls="controls"></video>
</div>
<div>
  <input type="file" accept="video/*" />
</div>
<script src="./jquery.min.js"></script>
<script>
$("input").change(function(){
  var files = this.files;
  if(!files.length) {
    return;
  }
  $("video").attr("src", window.URL.createObjectURL(files[0]));
  $("video").get(0).play();
});
</script>