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


Posted in Javascript onJune 30, 2016

浅谈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的其他属性均正常。

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

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

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

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

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

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

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

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

神奇!发现预览正常!

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

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

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

Javascript 相关文章推荐
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
简单学习vue指令directive
Nov 03 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
浅谈JS中json数据的处理
Jun 30 #Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 #Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 #Javascript
简单实现js间歇或无缝滚动效果
Jun 29 #Javascript
js精准的倒计时函数分享
Jun 29 #Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 #Javascript
RequireJS多页面应用实例分析
Jun 29 #Javascript
You might like
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
js去除空格的12种实用方法
2013/11/08 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
js匿名函数使用&传参(实例)
2017/09/08 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
python实现文件快照加密保护的方法
2015/06/30 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Django csrf 验证问题的实现
2018/10/09 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
介绍一下内联、左联、右联
2013/12/31 面试题
外语专业毕业生自荐信
2014/04/14 职场文书
公司应聘自荐书
2014/06/14 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
文艺晚会开场白
2015/05/29 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL