有時(shí)候文件上傳input框樣式不符合頁(yè)面樣式要求咖楣，需要修改為自定義的按鈕或圖片樣式
chrome的兼容性最好贴硫，很容易處理，直接css設(shè)置隱藏
style="display: none"熟嫩，然后通過(guò)另一個(gè)按鈕去觸發(fā)$("#inputfileID").click();都可以上傳成功煮纵。但是在低版本的IE會(huì)存在SCRIPTS:拒絕訪問(wèn)的安全限制問(wèn)題，限制我們必須通過(guò)點(diǎn)擊file的瀏覽按鈕去上傳文件卒煞，否則不能上傳
通用解決辦法：通過(guò)修改CSS樣式衣撬，設(shè)置file框透明不顯示但覆蓋在自定義按鈕的上層乖订，點(diǎn)擊時(shí)實(shí)際點(diǎn)擊file按鈕
實(shí)現(xiàn)樣式主要需要做到：
1.透明度的設(shè)置opacity: 0;
filter: alpha(opacity=0);
-moz-opacity:0;
opacity: 0;
2.z-index的設(shè)置，大的值位于上層具练，把自定義按鈕的值設(shè)置為z-index: -1;
3.position定位的方式乍构，有不同的實(shí)現(xiàn)方式，這里考慮把inputfile和自定義按鈕放到一個(gè)div容器里邊扛点，然后inputfile使用絕對(duì)定位position: absolute;當(dāng)然也有其他的方式
4.代碼實(shí)例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>文件上傳測(cè)試</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" />
</head>
<style>
body{
width: 80%;
margin: 0 auto;
}
/* 需要設(shè)置inputFile透明且位于button正上方*/
#content{
width: 400px;
height: 100px;
overflow: hidden;
position: relative;
background-color: azure;
}
#file1{
/* 設(shè)置了相同的高度和寬度哥遮，保證重疊時(shí)全覆蓋*/
width: 200px;
height: 50px;
/* 設(shè)置了絕對(duì)定位，相對(duì)于static定位以外的第一個(gè)父元素#content進(jìn)行定位陵究，實(shí)現(xiàn)覆蓋 */
float: left;
position: absolute;
left: 0;
top: 0;
/* 設(shè)置透明度 */
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
/* 設(shè)置z-index置于最上層 */
z-index: 999;
cursor: pointer;
}
#btn1{
width: 200px;
height: 50px;
float: left;
z-index: -1;
}
</style>
<body>
<form action="/upload" enctype="multipart/form-data" method="post">
<div id="content">
<input id="btn1" type="button" class="btn btn-primary" value="選擇文件"/>
<input id="file1" type="file" name="uploadFiles"/>
</div>
<div style="height: 50px;"></div>
<input class="btn btn-default" type="submit" value="提交">
</form>
</body>
</html>
5.實(shí)現(xiàn)效果
可以發(fā)現(xiàn)左邊這塊區(qū)域點(diǎn)擊一次后會(huì)有光標(biāo)眠饮，需要雙擊才能打開(kāi)，而點(diǎn)擊瀏覽按鈕只需要點(diǎn)擊一次铜邮，問(wèn)題是如果只想要右邊這個(gè)瀏覽按鈕又很難處理仪召，只能把按鈕寬度縮到65px那樣，感覺(jué)效果不好牲距。
然后之前在網(wǎng)上看到有使用label標(biāo)簽的處理方式
使用label標(biāo)簽可以直接通過(guò)點(diǎn)擊label調(diào)用表單控件返咱，跟之前做法完全類(lèi)似，這次需要確保點(diǎn)擊的是label標(biāo)簽牍鞠。將inputfile透明度設(shè)置為opacity: 0且不做定位覆蓋咖摹，發(fā)現(xiàn)inputfile框還會(huì)存在光標(biāo)聚焦問(wèn)題。
可以發(fā)現(xiàn)不需要做之前的重疊覆蓋难述，直接設(shè)置透明也可以實(shí)現(xiàn)調(diào)用萤晴，光標(biāo)聚焦問(wèn)題可以直接設(shè)置自動(dòng)失焦
<input id="file1" type="file" name="uploadFiles" onfocus="blur()"/>
補(bǔ)充：最好還是像之前一樣做重疊覆蓋的操作，不過(guò)這次是把inputfile框放到label下方隱藏z-index倒過(guò)來(lái)就可以了胁后，防止雙擊inputfile區(qū)域也可以打開(kāi)上傳框的問(wèn)題店读。
