今天公司要我寫移動(dòng)端點(diǎn)擊按鈕本地上傳照片叔扼，本人不會寫，所以就只寫了一個(gè)樣式价捧，結(jié)果發(fā)現(xiàn)默認(rèn)的樣式不好看。就查資料改寫了一下，希望對大家有用,
目前遇到的問題：
不知道有沒有大神會寫本地上傳照片這個(gè)功能淤堵，目前我自己完全沒有思路，只把樣式稍微寫了一下雕擂，
希望會寫上傳本地照片這個(gè)功能的 大神 指點(diǎn)一下谤逼，謝謝
4852919-c7f152a534927864.png
思路：input file上傳按鈕的美化思路是，先把之前的按鈕透明度opacity設(shè)置為0,然后耘子，外層用div包裹谷誓，就實(shí)現(xiàn)了美化功能费封。
代碼如下：*
DOM結(jié)構(gòu)
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">點(diǎn)擊這里上傳文件
</a>
<a href="javascript:;" class="file">選擇文件
<input type="file" name="" id="">
</a>
CSS樣式1
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
效果：
V){DWDG%ZU9{L$BI@NLX(1T.png
CSS樣式2
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
![ELR]4GFR%U5~@2UWD5OEEUX.png](http://upload-images.jianshu.io/upload_images/4852919-845ccc3ae620dcf2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
美化后顯示文件名
上面美化，把默認(rèn)顯示的文件名也給隱藏掉了，那么如何顯示文件名稱呢构诚？沒關(guān)系，我們可以用jquery來獲取文件的文件名窄坦。
我們可以寫個(gè)change事件
$(".a-upload").on("change","input[type='file']",function(){
var filePath=$(this).val();
if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
$(".fileerrorTip").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName").html(fileName);
}else{
$(".showFileName").html("");
$(".fileerrorTip").html("您未上傳文件唤反，或者您上傳文件類型有誤！").show();
return false
}
})
轉(zhuǎn)載原文地址：
關(guān)于 input checkbox和radio樣式美化鸭津，我也寫了一篇文章彤侍，請看 http://www.haorooms.com/post/css_mh_ck_radio
還有input search 右側(cè)有個(gè)關(guān)閉按鈕的美化，可以看http://www.haorooms.com/post/qd_ghfx 第五條逆趋。
