图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了。在这之前，我曾经通过订阅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="/UploadFiles/2021-04-02/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="/UploadFiles/2021-04-02/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 "color: #800000">注意： window.URL.createObjectURL 生成的数据链接是独占内存的，因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时，也会自动释放内容。
var resolveObjectURL = function(blob){
window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};
以上就是本文的全部内容，希望对大家的学习有所帮助。
标签：
js,图片预览
相思资源网 Design By www.200059.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。