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

 更新时间:2016年06月30日 09:05:38   投稿:jingxian  
下面小编就为大家带来一篇浅谈js图片前端预览之filereader和window.URL.createObjectURL。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

//preview img : filereader方式
  document.getElementById('imgFile').onchange = function(e){ 5     var ele = document.getElementById('imgFile').files[0];

    var fr = new FileReader();
    fr.onload = function(ele){

      var pvImg = new Image();
      pvImg.src = ele.target.result;
      pvImg.setAttribute('id','previewImg');

      $('.preview_wrap').html('').append(pvImg);18     }
    fr.readAsDataURL(ele);
  }
//preview img : URL.createObjectURL 方式
  document.getElementById('imgFile').onchange = function(e){
    var ele = document.getElementById('imgFile').files[0];

    var createObjectURL = function(blob){
     return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    };
    var newimgdata = createObjectURL(ele);

    var pvImg = new Image();
    pvImg.src = newimgdata;
    pvImg.setAttribute('id','previewImg');

    $('.preview_wrap').html('').append(pvImg);
  }

以上先贴出用filereader 和 URL.createObjectURL 两种预览方式。

按照前辈们的说法,creatObjectURL可以有更好的性能,或许是浏览器自带接口的原因, 可以处理的更快。

最近做了一个需要上传图片预览的项目,用的最简单的input file上传,最开始想到的就是用filereader实现前端预览,很简单,见前面的第一段代码,在自己手机上测试,没问题。但在某些奇葩手机上,比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片!但在该手机的微信,浏览器内上传均可以!

看了下代码,如下图,是因为base64编码内缺少了图片格式,手动加上image/jpg图片立即显示,刚开始以为是readAsDataURL的问题,没有编码成功,找了一晚上原因,无解!不知哪根筋搭错突然想到打印出input file的type看看,发现type为空,而file的其他属性均正常。

继续百度(google最近公司FQ不稳定,没法用),结果看到有人遇到类似奇怪问题,但是没有解决。

无意间却发现图片预览除了filereader还可以用url.createObjectURL。晚上11点26,先赶最后一班地铁。

=====================

第二天一早,把半夜的灵感实验了下,根据判断input file的图片类型,如果不存在就给文件手动赋值类型。(见下方调试用代码,有点乱)

结果发现file的type并不是你直接赋值就可以改变的,没有用!

于是开始实践URL.createObjectURL (见最上面的第二部分代码)

神奇!发现预览正常!

查看代码发现,createObjectURL得到的是一个http格式的文件,即使input file的文件类型不存在也不会编码失败。

以上这篇浅谈js图片前端预览之filereader和window.URL.createObjectURL就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ES6新特性之字符串的扩展实例分析

    ES6新特性之字符串的扩展实例分析

    这篇文章主要介绍了ES6新特性之字符串的扩展,结合实例形式对比分析了ES5与ES6字符串函数以及模板字符串相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • js如何取消事件冒泡

    js如何取消事件冒泡

    事件冒泡是什么意思这里就不为大家一一赘述了,下面为大家讲解的是js中如何取消事件冒泡,感兴趣的朋友可以参考下
    2013-09-09
  • 实例解析package.json和最常见的scripts字段

    实例解析package.json和最常见的scripts字段

    日常开发中,现在的前端开发已经被三大框架取代,其中最主流的不过vue和react,而开发这些项目的时候不得不接触package.json这个文件,可你真的了解这个文件吗?今天给大家聊聊package.json和最常见的scripts字段,感兴趣的朋友一起看看吧
    2023-04-04
  • 微信小程序实现验证码倒计时

    微信小程序实现验证码倒计时

    这篇文章主要为大家详细介绍了微信小程序实现验证码倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • js实现图片上传并正常显示

    js实现图片上传并正常显示

    这篇文章主要介绍了js实现图片上传并正常显示,我们经常遇到上传照片的情况,如何实现图片上传,本文为大家进行揭晓,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js中的string.format函数代码

    js中的string.format函数代码

    js中的string.format函数代码,学习js的朋友可以参考下。
    2011-07-07
  • js实现适用于素材网站的黑色多级菜单导航条效果

    js实现适用于素材网站的黑色多级菜单导航条效果

    这篇文章主要介绍了js实现适用于素材网站的黑色多级菜单导航条效果,涉及javascript鼠标事件及页面元素样式的动态切换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js中switch语句的学习笔记

    js中switch语句的学习笔记

    在本文里小编给各位分享的是关于js中switch语句的使用方法及学习笔记内容,有兴趣的朋友们可以参考下。
    2020-03-03
  • webpack5新特性Asset Modules资源模块详解

    webpack5新特性Asset Modules资源模块详解

    这篇文章主要为大家介绍了webpack5新特性Asset Modules资源模块详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 详解webpack3如何正确引用并使用jQuery库

    详解webpack3如何正确引用并使用jQuery库

    本篇文章主要介绍了详解webpack3如何正确引用并使用jQuery库,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08

最新评论