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