码迷,mamicode.com
首页 > Web开发 > 详细

IE8环境下的上传图片预览

时间:2019-03-29 14:39:36      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:img   问题   soft   矢量   pre   div   cli   text   提示信息   

今天做一个需要在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环境下的上传图片预览

标签:img   问题   soft   矢量   pre   div   cli   text   提示信息   

原文地址:https://www.cnblogs.com/marisen/p/10620982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!