IE8环境下的上传图片预览

Posted 2021-11-22 marisen

今天做一个需要在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‘)";
})

以上。