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. ArcGIS JS 4加载第三方矢量切片

        现在矢量切片越来越普及,对于地图渲染能更轻更快.ArcGIS JS 4.13可以实现加载第三方矢量切片,以下为代码示例,最下方是我之前切的建筑物数据.     当切片大小在1M左右,加载效果还 ...

  2. Linux - CentOS 7 通过Yum源安装 MySql 5.7

    添加MySQL Yum存储库 从官网下载最新的mysql源 官网地址:https://dev.mysql.com/downloads/repo/yum/ 选择并下载适用于平台的发行包. 然后,在Lin ...

  3. React: 通过React.Children访问特定子组件

    一.简介 React中提供了很多常用的API,其中有一个React.Children可以用来访问特定组件的子元素.它允许用来统计个数.map映射.循环遍历.转换数组以及显示指定子元素,如下所示: va ...

  4. Android组件体系之视图绘制

    一.View组件View组件有几个重要的方法需要关注,也是自定义View经常需要重写的方法. 1.measure作用是测量View组件的尺寸.对应的方法是onMeasure,测量View的宽和高.Vi ...

  5. 设置openwrt路由器的防火墙_允许从外网访问内网的ipv6服务

    设置openwrt路由器的防火墙_允许从外网访问内网的ipv6服务 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-11-02. 参考文章: IPv6"内网"设备 ...

  6. React 面试问题

    eact 面试问题 如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的.本文收集了 React 面试中最常见的 50 大问题,这是一份理想的指南,让你为 React 相关的 ...

  7. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  8. SVN安装简介

    博主最近换个份工作,代码管理用的是SVN,因为之前用的Git管理代码的,SVN没接触过,既然公司中要用,就学习下使用吧.从最基本的安装开始吧. SVN官网:https://tortoisesvn.ne ...

  9. 松软科技web课堂:JavaScript 布尔(逻辑)

    JavaScript 布尔(逻辑)代表两个值之一:true 或 false. 布尔值 通常,在编程中,您会需要只能有两个值之一的数据类型,比如 YES / NO ON / OFF TRUE / FAL ...

  10. Socket的常用方法。

    构造方法: 1.使用构造方法 public ServerSocket(int port) 和public ServerSocket(int port,int backlog) 创建ServerSock ...