JS魔法堂之实战:纯前端的图片预览
一、前言
图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。在这之前,我曾经通过订阅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;
六、20140902补充:使用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);
};
七、总结
好吧,现在妈妈再也不担心我的图片预览实现得太麻烦了!
如果觉得上面的使用方式不方便,可以访问https://github.com/fsjohnhuang/preview/blob/master/preview.js,我已经将其封装成工具函数了。
- Oracle闪回原理测试(三)(r12笔记第16天)
- 利用JS生成二维码图片,优化WEB性能及页面加载速度
- Go语言的指针 & *
- MySQL中的double write(二)(r12笔记第17天)
- 论Go语言中goroutine的使用
- WordPress发布文章同步到新浪微博失败的问题解决与分享
- 压测工具swingbench和sysbench对比(r12笔记第13天)
- 解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用
- MySQL源码安装总结(r12笔记第12天)
- 全站启用SSL之后,如何兼容不支持https抓取的搜索引擎?
- sandbox和MHA快速测试(r12笔记第32天)
- 分享一个支持https的CDN及启用SSL后续问题汇总
- 分分钟搭建MySQL一主多从环境(r12笔记第31天)
- 相同update语句在MySQL,Oracle的不同表现(r12笔记第30天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux中搭建完整的samba服务器全攻略(centos版)
- Thinkphp5 自定义上传文件名的实现方法
- PHP读取文件,解决中文乱码UTF-8的方法分析
- Linux低电量自动关机的实现办法
- php设计模式之工厂方法模式分析【星际争霸游戏案例】
- PHP+Apache实现二级域名之间共享cookie的方法
- linux虚拟机配置静态IP地址的完整步骤
- laravel-admin利用ModelTree实现对分类信息的管理
- Linux系统下快速配置HugePages的完整步骤
- Laravel5.1 框架关联模型之后操作实例分析
- PHP实现的多进程控制demo示例
- 你可能不知道的一些linux文件权限管理办法
- Laravel框架路由与MVC实例详解
- python实现学生管理系统开发
- 使用 chkconfig 和 systemctl 命令启用或禁用 Linux 服务的办法