今天做一个需要在IE浏览器上使用的信息录入项目，遇到了图片上传预览的问题，找了一些资料，最后使用了IE自带的滤镜做到了
<!--HTML IE8不支持opacity,只能使用双层，一层背景半透明，一层提示信息，而后在单击遮罩层的时候去模拟file的单击-->
<div id="uploadFace" > ???<p class="mask"></p> ???<p class="mask-content">更换头像</p> ???<input type="file" id="ipt_face" accept="image/*" /></div>
/*CSS*/#uploadFace { ???position: relative; ???width: 120px; ???overflow: hidden;}#uploadFace #ipt_face { ???filter: alpha(opacity=0);}#uploadFace .mask{ ???width:100%; ???height:128px; ???position:absolute; ???top:0; ???left:0; ???z-index:998;} ???????#uploadFace:hover .mask { ???????????background-color: #000; ???????????filter: alpha(opacity=50); ???????????cursor:pointer; ???????} ???????#uploadFace:hover .mask-content { ???????????filter: alpha(opacity=100); ???????????cursor: pointer; ???????}.mask-content { ???width: 100%; ???height: 68px; ???padding-top: 60px; ???color: white; ???position: absolute; ???font-size: 14px; ???font-weight: 600; ???z-index: 999; ???background: url(../Images/face.png) no-repeat; ???background-position: center 30px; ???filter: alpha(opacity=0);}鼠标移动到该头像上时的效果（图片是随便找的一个矢量相机）：
JS代码如下：
$(".mask-content").click(function () { ???????$("#ipt_face").click();})$("#ipt_face").change(function () { var fileobj = document.getElementById("ipt_face"); fileobj.select(); //需要失去焦点，不然下一步会报错：无法访问 fileobj.blur(); var url = document.selection.createRange().text; //下行的replace是将获取到的路径反斜杠替换为正斜杠 document.getElementById("uploadFace").style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = ‘" + url.replace(/\\/g, "/") + "‘, sizingMethod = ‘scale‘)";})以上。
IE8环境下的上传图片预览
原文地址：https://www.cnblogs.com/marisen/p/10620982.html