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);

示例

<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)
})

参考链接:https://blog.csdn.net/qq_39258552/article/details/84133770

参考链接:https://blog.csdn.net/baidu_38558076/article/details/80287689

URL.createObjectURL()的使用方法的更多相关文章

  1. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  2. URL.createObjectURL和URL.revokeObjectURL

    一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里,新的对象URL ...

  3. 图片上传预览 (URL.createObjectURL)

    知识预备:1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定. ...

  4. URL.createObjectURL() 与 URL.revokeObjectURL()

    .URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL ...

  5. JS获取当前网页内容,创建文件并下载,URL.createObjectURL和URL.revokeObjectURL

    有时候需要在前端侧对于动态生成的内容进行下载,比如页面上某一段文本信息,再比如对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借 ...

  6. URL.createObjectURL()

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  7. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  8. js图片前端预览之 filereader 和 window.URL.createObjectURL

    //preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...

  9. jsp Request获取url信息的各种方法比较

    从Request对象中可以获取各种路径信息,以下例子: 假设请求的页面是index.jsp,项目是WebDemo,则在index.jsp中获取有关request对象的各种路径信息如下 String p ...

随机推荐

  1. 爬虫(五):代理IP、Cookie

    1. 代理IP 代理IP这个功能呢,在urllib和requests中都存在,但是这个在大的爬虫项目中是非常重要的,所以我拿出来单独讲解. 对于某些网站,如果同一个 IP 短时间内发送大量请求,则可能 ...

  2. JS---DOM---为同一个元素绑定多个不同事件指向同一个事件处理函数

    为同一个元素绑定多个不同事件指向同一个事件处理函数 1. 用了switch(e.type){} 来修改 2. break <input type="button" value ...

  3. 常见SQL编写和优化

    常见的SQL优化方式 对查询进行优化,应尽量避免全表扫描,首先应考虑在where及order by 涉及的列上建立索引. 应尽量避免在 where 子句中对字段进行null 值判断,否则将导致引擎放弃 ...

  4. Aiseesoft 4K Converter for Mac如何转换视频格式?Aiseesoft 4K使用方法

    Aiseesoft 4K如何转换视频格式?由于这款4K UHD转换器支持最新的4K编码/解码技术,因此您可以将4K视频转换为4K电视或其他设备支持的任何其他视频格式.Aiseesoft 4K使用方法分 ...

  5. 微信支付 第三篇 微信调用H5页面进行支付

    上一篇讲到拿到了 预支付交易标识 wx251xxxxxxxxxxxxxxxxxxxxxxxxxxxxx078700 第四步,是时候微信内H5调起支付了! 先准备网页端接口请求参数列表 微信文档中已经明 ...

  6. 如何在 Chrome中导出、导入书签和密码

    目录 书签 密码 书签 1.导出 点击浏览器右上角的三小点,选择"书签",再选择"书签管理器",进入如下页面 点击蓝色书签栏右上角的三小点,选择"导出 ...

  7. C#/.Net开发入门篇(2)——第一个控制台应用程序

    相信看了上一篇文章的小伙伴已经安装好自己的开发工具了VS了,这一篇文章就教大家怎么创建第一个应用程序. 下面大家跟着我的操作一起来创建自己的第一个应用程序吧 一.打开VS工具点击左上角的文件→新建→项 ...

  8. java使用htmlunit工具抓取js中加载的数据

    htmlunit 是一款开源的java 页面分析工具,读取页面后,可以有效的使用htmlunit分析页面上的内容.项目可以模拟浏览器运行,被誉为java浏览器的开源实现.这个没有界面的浏览器,运行速度 ...

  9. OPENGL 坐标轴转换

    坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴  OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...

  10. Linux学习入门-------------------------VMvare与镜像的安装与配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_39038465/article/d ...