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 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

沪江:React Native三端融合应用实践

摘要 ReactNative给前端提供了一套两端共用代码和快速实现热更新的框架,但在实际落地中,需要进行大量的保障工作和优化工作来让业务能够平稳上线,另一方面,...

49850
来自专栏腾讯云技术沙龙

卢萌凯:玩转SCF与COS的结合应用

大家好。我是腾讯云中间件及无服务器云函数架构师。我今天介绍分四部分:第一,对象存储COS简介。第二,比较实用的一部分,SCF与COS结合使用的应用场景。第三,比...

53970
来自专栏王斌的专栏

亿万级访问量下的前端同构直出实践

兴趣部落项目自 2014 年至今,一直都是采用的是前端渲染的模式,这种模式就是页面html是一个空壳,首屏的内容需要 css 和 js 都加载完成后,请求 cg...

95320
来自专栏北京马哥教育

学习Vim的四周计划

16420
来自专栏Web项目聚集地

前端面试题(HTML和CSS)

我会推出前端面试题的专栏,每一期我会推出10个经典面试题,面试题一部分由小伙伴提供,一部分从面试真题中选出,最后会来一个大汇总。主要目的是帮助那些还没有前端开...

16720
来自专栏Guangdong Qi

iOS 各种图标

26250
来自专栏极客编程

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。

16810
来自专栏Python爬虫与算法进阶

为什么不推荐Selenium写爬虫

最近在群里经常会看到有些朋友说,使用Selenium去采集网站,我看到其实内心是很难受的,哎!为什么要用Selenium呢? 我想说下自己的看法,欢迎各位大佬批...

40160
来自专栏编程

python编程

使用python编写客户端不是一件很复杂的事情。比如说,基本上不管是mac版本,还是windows版本、linux版本,一般python都默认安装了Tkinte...

285100
来自专栏腾讯开源的专栏

Web组件化框架Omi颠覆式升级 全面拥抱Web components

Omi 是腾讯开源的通用 Web 组件化框,在最近的一次版本发布中,Omi 进行了颠覆式升级,全面拥抱 Web Components。 Web Compone...

1.3K90

扫码关注云+社区

领取腾讯云代金券