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

文件上传时，默认的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);
        }
    }
});

参考链接：IE input file隐藏不能上传文件解决方法