思路:
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
DOM结构:
<div class="inpFilePhoto">
<input type="file" name="file"/>
</div>
<div class="fileNameShow"></div>
样式:
.inpFilePhoto{
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.inpFilePhoto input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.inpFilePhoto:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
使用css美化之后,input上传按钮选择文件后不显示文件名称的处理办法:
$(".inpFilePhoto").on("change","input[type='file']",function(){
var filePath=$(this).val();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".fileNameShow").html(fileName);
});