专栏首页smyjs图片前端预览之 filereader 和 window.URL.createObjectURL

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

 1 //preview img : filereader方式
 2     document.getElementById('imgFile').onchange = function(e){ 5         var ele =  document.getElementById('imgFile').files[0];
 6 
 8         var fr = new FileReader();
 9         fr.onload = function(ele){
10 
11             var pvImg = new Image();
12             pvImg.src = ele.target.result;
13             pvImg.setAttribute('id','previewImg');
14 
15             $('.preview_wrap').html('').append(pvImg);18         }
20         fr.readAsDataURL(ele);
21     }
 1 //preview img : URL.createObjectURL 方式
 2     document.getElementById('imgFile').onchange = function(e){
 5         var ele =  document.getElementById('imgFile').files[0];
 6 
 7         var createObjectURL = function(blob){
 8           return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
 9         };
10         var newimgdata = createObjectURL(ele);
11 
12         var pvImg = new Image();
13         pvImg.src = newimgdata;
14         pvImg.setAttribute('id','previewImg');
15 
16         $('.preview_wrap').html('').append(pvImg);
21     }

以上先贴出用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的文件类型不存在也不会编码失败。

 ps:

对于在安卓内点击上传无反应的问题是安卓为了安全起见屏蔽了上传,见:http://www.tuicool.com/articles/buu6ji

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS倒计时

    <!--倒计时脚本--> <script type="text/javascript"> var CID = "endtime"; ...

    smy
  • OSI七层模型与TCP/IP五层模型

            博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能静下心学习一下,希望自己能更深入的掌握这项最基本的通信接口技术。下面就开...

    smy
  • 事件委托与阻止冒泡

    简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="...

    smy
  • 微信也来插足互联网+糖尿病管理,强强联手才是成功的关键

    中国作为世界上糖尿病人数最多的国家,如何快速有效地提升糖尿病的管理水平与成效一直是社会各界努力的方向和奋斗的目标。 从支付宝到微信,从饿了么到滴滴、优步打车,信...

    企鹅号小编
  • 安卓开发之再用SharedPreference

    1、先获取对象 MySharePreference = getPreferences(Context.MODE_PRIVATE);//这里的模式自己查找 2、...

    苦咖啡
  • Ubuntu16:cmake生成Makefile编译caffe过程(OpenBLAS/CPU+GPU)塈解决nvcc warning:The 'compute_20', 'sm_20'

    之前在ubuntu14下实现了Caffe编译(参见去年写的博客 《 Ubuntu14:cmake生成Makefile编译caffe过程(OpenBLAS/CPU...

    用户1148648
  • easyui+ssm+shiro做的登录注册修改密码审核用户添加角色(五)

    easyui+ssm+shiro做的登录注册修改密码审核用户添加角色(五) ...

    Java架构师必看
  • 一文搞懂 FlinkSQL函数 LAST_VALUE 的原理

    刚开始接触 FlinkSQL 时,对 LAST_VALUE 特别好奇,虽然工作当中有在用到,但还是特别的想知道它是怎么实现的,今天终于可以总结一下

    shengjk1
  • 【从零学习OpenCV 4】LUT查找表

    经过几个月的努力,小白终于完成了市面上第一本OpenCV 4入门书籍《从零学习OpenCV 4》。为了更让小伙伴更早的了解最新版的OpenCV 4,小白与出版社...

    小白学视觉
  • 从Baa开发中总结Go语言性能渐进优化

    在Go生态已经有很多WEB框架,但感觉没有一个符合我们的想法,我们想要一个简洁高效的核心框架,提供路由,context,中间件和依赖注入,而且拒绝使用正则和反射...

    李海彬

扫码关注云+社区

领取腾讯云代金券