浅谈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 相关文章推荐
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
vue实现列表的添加点击
Dec 29 Javascript
tab栏切换原理
Mar 22 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
JS前端笔试题分析
2016/12/19 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python回调函数用法实例详解
2015/07/02 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python二维键值数组生成转json的例子
2019/12/06 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
作文批改评语大全
2014/04/23 职场文书
诉前财产保全担保书
2014/05/20 职场文书
个人自荐材料
2014/05/23 职场文书
工作自我推荐信范文
2015/03/25 职场文书
公司人力资源管理制度
2015/08/05 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server