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>