js实现纯前端的图片预览


Posted in Javascript onApril 27, 2016

图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了。

偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅。

 一、准备功夫1──FileReader 

 

  FileReader是HTML5的新特性,用于读取Blob和File类型的数据。具体的用法如下:

(1). 构造方式

var fr = new FileReader();
(2). 属性

readyState:类型为unsigned short,FileReader实例的当前状态,(EMPTY——0,还没有加载任何数据;LOADING——1,数据正在加载;DONE——2,已完成全部的读取请求),只读。

result:读取到的文件内容,只读。

error:类型为DOMError,表示在读取文件时发生的错误,只读。

(3). 方法

abort():中止读取操作,并将readyState设置为DONE。当没有执行读取操作时,调用该方法会抛DOM_FILE_ABORT_ERR异常。

readAsArrayBuffer(Blob blob):读取数据,result属性被设置为ArrayBuffer类型

readAsText(Blob blob [, encoding='utf-8']):读取数据,result属性被设置为String类型

readAsBinaryString(Blob blob):读取数据,result属性被设置为原始二进制数据

readAsDataURL(Blob blob):读取数据,result属性被设置为Data URI Scheme形式(具体请浏览《JS魔法堂:Data URI Scheme介绍》)

(4).事件

onload:读取数据成功后触发

onerror:读取数据时抛异常时触发

onloadstart:读取数据前触发

onloadend:读取数据后触发,在onload或onerror后触发

onabort:中止读取后触发

onprogress:读取过程中周期性触发

(5). 浏览器支持

FF3.6+,Chrome7+,IE10+ 

二、准备功夫2──DXImageTransform.Microsoft.AlphaImageLoader滤镜 

 

(1). 作用:主要作用是对图片进行透明处理(IE5.5~6并不支持透明的png)

(2). 样式中的使用方式

#preview{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

 (3). JS中的使用方式

var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

(4). 属性

enabled:可选项,设置滤镜是否激活。值范围true(默认),false

sizingMethod:可选项,设置滤镜作用的图片在容器边界内的显示方式,值范围crop(剪切图片以适应容器尺寸),image(默认值,增大或缩小容器尺寸以适应图片的尺寸),scale(缩放图片以适应容器尺寸)

src:必填项,使用绝对或相对URL指向背景图片。当URL为用户计算机本地地址时有效, 而img元素的src为用户计算机本地地址时会抛不允许访问本地文件系统的异常。

 三、实现 

 

接下来我们就利用FileReader的readAsDataURL来获取Data URI Scheme来实现图片预览的功能,而IE5.5~9我们就使用滤镜DXImageTransform.Microsoft.AlphaImageLoader来作降级处理。

html片断:

<style type="text/css">
#preview{
  width: 100px;
  height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
  #preview{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>

js片断:

var preview = function(el){
  var pv = document.getElementById("preview");
  // IE5.5~9使用滤镜
  if (pv.filters && typeof(pv.filters.item) === 'function'){
    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
  }
  else{
    // 其他浏览器和IE10+(不支持滤镜)则使用FileReader
    var fr = new FileReader();
    fr.onload = function(evt){
      var pvImg = new Image();
      pvImg.style.width = pv.offsetWidth + 'px';
      pvImg.style.height = pv.offsetHeight + 'px';
      pvImg.src = evt.target.result;
      pv.removeChild(0);
      pv.appendChild(pvImg);
    };
    fr.readAsDataURL(el.files[0]);
  }
};

四、坑 

 

   由于IE11作了安全方面的考虑,使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址,只能获取到 C:\fakepath\文件名称 。因此假如使用IE11,但文本模式却设置为10以下,那就没木有办法实现图片预览了。

解决办法1──在head标签下加入这句: <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 。这样就可以告诉IE,默认使用当前IE的最高版本解析、渲染网页了。

解决办法2──采用 document.selection.createRangeColleciton() 获取真实地址,具体操作如下:

// 假设fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText;

五、补充:使用window.URL.createObjectURL代替FileReader

 

  通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串,若图片较大那么字符串则更长,若页面出现reflow时则会导致性能下降。解决方案如下:

  1. 预览的img标签使用绝对定位,从而脱离正常文档流,那么就与文档的其他元素无关了,而reflow时则不会影响性能。

  2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

var createObjectURL = function(blob){
 return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};

注意: window.URL.createObjectURL 生成的数据链接是独占内存的,因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时,也会自动释放内容。

var resolveObjectURL = function(blob){
 window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
javascript实现获取字符串hash值
May 10 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
简介BootStrap model弹出框的使用
Apr 27 #Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 #Javascript
javascript实现延时显示提示框特效代码
Apr 27 #Javascript
JS延时器提示框的应用实例代码解析
Apr 27 #Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 #Javascript
requireJS使用指南
Apr 27 #Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 #Javascript
You might like
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python计算一个序列的平均值的方法
2015/07/11 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python模块之paramiko实例代码
2018/01/31 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python中is和==的区别详解
2018/11/15 Python
python实现简单成绩录入系统
2019/09/19 Python
python TCP包注入方式
2020/05/05 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
留学自荐信的技巧
2013/10/17 职场文书
书香校园建设方案
2014/05/02 职场文书
化工工艺设计求职信
2014/06/25 职场文书
2014年物流工作总结
2014/11/25 职场文书