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 相关文章推荐
jquery插件开发之实现md5插件
Mar 17 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
浅析Vue 中的 render 函数
Feb 28 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
Python模块WSGI使用详解
2018/02/02 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
个人找工作自荐信格式
2013/09/21 职场文书
啤酒销售实习自我鉴定
2013/09/24 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
未婚证明书模板
2014/10/08 职场文书
信息合作协议书
2014/10/09 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
教师党员自我评价2015
2015/03/04 职场文书