关于JavaScript的URL.createObjectURL()的使用方法
更新时间：2023年04月25日 08:33:03 作者：小太阳...
这篇文章主要介绍了关于URL.createObjectURL()的使用方法,使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存,还不清楚的朋友一起来看看吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似，下面是个人的一些理解，如有不正确的地方，欢迎指出：
主要区别
- 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
- 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
执行时机：
- createObjectURL是同步执行（立即的）
- FileReader.readAsDataURL是异步执行（过一段时间）
内存使用：
- createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
- FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
兼容性方面两个属性都兼容ie10以上的浏览器。
优劣对比：
- 使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
- 如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL
使用方式：
objectURL = URL.createObjectURL(blob);
示例
html 文件
<input type="file" id="btn" accept="image/*" value="点击上传" /> <img id="img"/>
js 文件
btn.addEventListener('change',function(){
let file = this.files[0];
// 进一步防止文件类型错误
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}
img.src = URL.createObjectURL(file)
})
到此这篇关于关于URL.createObjectURL()的使用方法的文章就介绍到这了,更多相关URL.createObjectURL()用法内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了网址URL中特殊字符转义编码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-10-10
这篇文章主要介绍了javascript中的3种继承实现方法，包括使用Object.create实现类式继承、使用utilities工具包自带的util.inherites、使用extends关键字，非常的实用，希望对大家了解javascript继承能够有所帮助2016-01-01
实现元素复制的方法有很多，在本文将为大家介绍下使用js是如何实现的，下面有个不错的示例，希望大家可以尝试操作下2013-11-11
下面小编就为大家带来一篇JavaScript核心语法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了JavaScript 浏览器对象模型BOM使用介绍,需要的朋友可以参考下2015-04-04
其实Javascript中没有类这个定义，但是有类这个概念。很多人都写过这样的代码，就是一个关键字 function，然后定义一个方法名，方法名后紧跟一对括号。如果你在项目中写过这样的代码，那么祝贺你，你可以不费任何吹毛之力，就能一口气读完这篇文章了。2014-09-09
这篇文章主要介绍了简介JavaScript中的setTime()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要为大家介绍了JavaScript的变量与数据类型，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
JavaScript内置对象属性及方法大全，学习js的朋友可以收藏下， 方便以后的学习。2010-07-07
最新评论