一、<input type="file"/>在各个浏览器中的默认样式:
系统 | 浏览器 | 样式效果 | 点击效果 |
---|---|---|---|
mac | 点击按钮和输入框都可以打开文件夹 | ||
mac | firfox | 点击按钮和输入框都可以打开文件夹 | |
mac | safari | 点击按钮和输入框都可以打开文件夹 | |
win10 | 点击按钮和输入框都可以打开文件夹 | ||
win10 | firefox | 点击按钮和输入框都可以打开文件夹 | |
win10 | edge | 点击按钮和输入框都可以打开文件夹 | |
win10 | ie11 | 点击按钮和输入框都可以打开文件夹 | |
win10 | ie11仿真ie10\9\8\7\5 | 点击按钮可以打开文件夹,输入框不可以打开文件夹 |
二、修改成自己的样式
目标样式如下:
上传头像
当上传文件后,会在右侧显示文件名
点击,在新窗口打开演示版:www.jusctice.cn/u1 (基础演示用,没有做更多判断容错处理,所以别传太大的文件)
具体代码:
-- css --
.inputFileWrapper label{
display: block;
float: left;
position: relative;
}
.inputFileWrapper input[type="file"]{
position: absolute;
width: 1px;
height: 1px;
clip:rect(0,0,0,0);
}
.inputFileWrapper .custorm-style{
display: block;
width: 390px;
height: 50px;
}
.inputFileWrapper .custorm-style .left-button{
width: 80px;
line-height: 50px;
background: #008ac7;
color: #fff;
display: block;
text-align: center;
float: left;
}
.inputFileWrapper .custorm-style .right-text{
width: 300px;
height: 40px;
line-height: 50px;
display: block;
float: right;
padding: 4px;
border: 1px solid #008ac7;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
--html--
<div class="inputFileWrapper">
<label for="inputFile">
<input type="file" id="inputFile"/>
<span class="custorm-style">
<span class="left-button">上传头像</span>
<span class="right-text" id="rightText"></span>
</span>
</label>
</div>
--js--
<script src="js/jquery-1.11.2-min.js"></script>
<script>
var fileBtn = $("input[type=file]");
fileBtn.on("change", function(){
var index = $(this).val().lastIndexOf("\\");
var sFileName = $(this).val().substr((index+1));
$("#rightText").html(sFileName);
});
</script>