今天做一个需要在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:;
left:;
z-index:;
}
#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:;
z-index:;
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')";
})
以上。