浅谈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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 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
PHP4引用文件语句的对比
2006/10/09 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
pycharm远程调试openstack的图文教程
2017/11/21 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python实现函数极小值
2019/07/10 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
个人简历自我评价八例
2013/10/31 职场文书
自我鉴定四大框架
2014/01/17 职场文书
授权委托书范本
2014/04/03 职场文书
团代会开幕词
2015/01/28 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
工作证明格式范文
2015/06/15 职场文书
《刷子李》教学反思
2016/02/20 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
Oracle中DBLink的详细介绍
2022/04/29 Oracle