Sow nothing reap nothing

input上传按钮美化

已有2,860次关注

思路:
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);
});

已自动关闭评论