我們在做頁面時有時候為了讓上傳這種類型的輸入看起來更加美觀，但是由於其自身往往是無法定義樣式的，所以我們經常用按鈕來 “替代” 它，接下來講講其原理和實踐過程。原理：為了讓input[type='file']看起來更像一個button，我們首先先采用絕對定位定義一個<a>標簽，然后采用絕對定位在相同的位置定義一個和<a>大小完全相同的<input type='file'>，並把其透明度設置為0，最后再定義一個div顯示上傳的文件名即可。為了方便吧css直接寫在html里，簡要代碼如下：
<!doctype html>
<html>
<head>
<style> * { margin: 0; padding: 0;
}
/*藍色按鈕,絕對定位*/ .blueButton { position: absolute; display: block; width: 100px; height: 40px; background-color: #00b3ee; color: #fff; text-decoration: none; text-align: center; font:normal normal normal 16px/40px 'Microsoft YaHei'; cursor: pointer; border-radius: 4px;
} .blueButton:hover { text-decoration: none;
}
/*自定義上傳,位置大小都和a完全一樣,而且完全透明*/ .myFileUpload { position: absolute; display: block; width: 100px; height: 40px; opacity: 0;
}
/*顯示上傳文件夾名的Div*/ .show { position: absolute; top:40px; width: 100%; height: 30px; font:normal normal normal 14px/30px 'Microsoft YaHei';
}
</style>
<script src="../jquery-3.1.0.min.js"></script>
<title>file自定義上傳</title>
</head>
<body>
<a href='javascript:void(0);' class="blueButton">選擇文件</a>
<input type="file" class="myFileUpload" />
<div class="show"></div>
</body>
</html>
<script> $(document).ready(function() { $(".myFileUpload").change(function() { var arrs=$(this).val().split('\\'); var filename=arrs[arrs.length-1]; $(".show").html(filename); }); }); </script>
這樣生成的頁面如下：
點擊后頁面如下：
這樣就簡單地實現了一個美化樣式的input[type='file']，重點是這種思維模式很重要，對后面的圖片上傳也是類似思路。