input file的樣式不能直接用css來美化，我們可以曲線救國，把input file的透明度降低爲0，相當於把這個控件隱藏了，實際上只是透明度爲0，還是存在的，然後把div套上去，讓div充當file的按鈕。
所以這個辦法很簡單，但是，把input file的透明度降低，連選擇文件後的文件名也被隱藏了，這下可怎麼辦？那就只能用jquery獲取file的文件名了。
<!DOCTYPE html>
<html>
<head>
<title>文件上傳file美化</title>
<style type="text/css">
*{margin:0;padding: 0;}
#btn{
width: 120px;
height: 45px;
background: #39f;
line-height: 45px;
text-align: center;
color: #fff;
}
#btn .file{
opacity: 0;
position: relative;
top: -56px;
width: 100%;
height: 45px;
}
</style>
</head>
<body>
<!-- 用一個div來當作美化的上傳按鈕，file按鈕被透明化 -->
<div id="btn">
文件上傳
<input type="file" class="file" οnclick="daojishi()">
</div>
<!-- 文件名顯示區域 -->
<div id="filename"></div>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<!-- 輪詢文件名 -->
<script>
function daojishi() {
setInterval("getname()",1000);
}
</script>
<!-- 獲取文件名 -->
<script>
function getname() {
var filename = $("#btn .file").val();
$("#filename").text(filename);
}
</script>
</body>
</html>
然後就每秒輪詢一次頁面，當file的val值有了，就會顯示文件名
作者：TANKING
網站：http://www.likeyunba.com