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 相关文章推荐
奇妙的js
Sep 24 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
简介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
php基础知识:控制结构
2006/12/13 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
8个PHP数组面试题
2015/06/23 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
iframe子父页面调用js函数示例
2013/11/07 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
总结Python编程中函数的使用要点
2016/03/20 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
使用python远程操作linux过程解析
2019/12/04 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
小学国庆节活动方案
2014/02/11 职场文书
体育口号大全
2014/06/18 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
护理医院见习报告
2014/11/03 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电