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://madjs.com?id=111');

// 111

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

// https://madjs.com/?id=123v&name=madjs

console.log('parsedUrl' , parsedUrl.toString(), parsedUrl.searchParams.set("name" , 'madjs'));

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

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

// url.href http://www.madjs.com/index.html

// url.toString() http://www.madjs.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>