ie8及其以下版本兼容性问题之input file隐藏上传文件

最新推荐文章于 2021-06-03 17:49:20 发布

YSP易水寒

最新推荐文章于 2021-06-03 17:49:20 发布

阅读量7.4k

点赞数

分类专栏：浏览器兼容文章标签： ie 8 兼容性

本文链接：https://blog.csdn.net/yishuihan_001/article/details/73650926

版权

浏览器兼容专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文件上传时，默认的file标签很难看，而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏，然后创建一个标签来替代它。但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按钮选择文件才可以把文件上传上去。此时我们可以将file input透明化, 遮罩在自定义的button input 上面。这样用户看到的是我们自定义button的外观而实际上点击的还是file标签。

这样一来我们自定义的按钮存在又能真正点击到file标签，IE下就可以正常上传文件了。

示例：

//html
<div class="modifyInfo_upload pr">
    <span>上传头像</span>
    <input type="file" name="portrait" id="upLoadPortrait" value="">
</div>

//css
.modifyInfo_upload{
    height: 30px;
    text-align: center;
    margin-bottom: 29px;
}
.modifyInfo_upload span{
    height: 30px;
    line-height: 30px;
    color: #1db69a;
    cursor: pointer;
}
.modifyInfo_upload input{
    width: 58px;
    height: 20px;
    overflow: hidden;
    opacity: 0;
    -ms-filter:"alpha(opacity=0)";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    cursor: pointer;
}

//js
var portraitPath;
$("#upLoadPortrait").on('change',function(event){
    if($(this).val() != ''){
        var strExtension = $(this).val().substr($(this).val().lastIndexOf('.') + 1);
        if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') {
            alert("请选择图片文件！");
        }else{
            portraitPath = $(this).val();
            console.log(portraitPath);
            $('.modifyInfo_portrait img').attr('src',portraitPath);
        }
    }
});