input中file属性，美化按钮，修改选中文件

Posted 2020-10-12

1.美化按钮

<a href="" class="content-a-upload">
    <input type="file" id="file-select" >请选择文件
</a>

.content-a-upload {
    position: relative;
    padding:  4px 10px;
    height: 60px;
    width: 200px;
    font: 400 16px/60px "宋体";
    text-align: center;
    cursor: pointer;
    color: #888;
    background: #ffbad9;
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
}
.content-a-upload input {
    position: absolute;
    font-size: 100px;
    height: 77px;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.content-a-upload:hover {
    color: #444;
    background: #ff6a8e;
    border-color: #ccc;
    text-decoration: none
}

2.清除选中文件

<input type="file" id="file-select">
<input type="button" value="清除" id="bttn2">

<script>
$("#bttn2").click(function () {
    clearFileInput();
});
   function clearFileInput () {
       var file = $("#file-select");
       file.after(file.clone());
       file.remove();
   }
</script>