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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2018-05-02 echarts异步加载
2018-05-02 echarts移动端字体模糊解决方法
2017-05-02 webpack命令