input中file屬性,美化按鈕,修改選中文件


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>

  

 
         
         
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM