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('test?id=111');
// 111
console.log('parsedUrl' , parsedUrl, ("id"));
// test/?id=123v&name=test
console.log('parsedUrl' , String(), parsedUrl.searchParams.set("name" , 'test'));
3. String()和URL.href可以取得URL对象的url
let url = new URL('st/index.html')
// url.href st/index.html
// String() st/index.html
console.log('url.href', url.href, 'String()' , String());
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');
var url = ateObjectURL(oFile.files[0]);
inputtypefile样式
// 创建预览图⽚
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", ateObjectURL(files[0]));
$("video").get(0).play();
});
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。