css input[type=file] 樣式美化，input上傳按鈕美化

標籤：

css input[type=file] 樣式美化，input上傳按鈕美化 2014年8月29日  http://www.haorooms.com/post/css_input_uploadmh

由於明天公司組織出去遊玩，今天把這兩天的部落格都寫了吧，今天的內容是input[type=file] 樣式美化，input上傳按鈕美化。

我們在做input文本上傳的時候，html內建的上傳按鈕比較醜，如何對其進行美化呢？同理：input checkbox美化，input radio美化是一個道理的，後面文章會總結。

思路：

input file上傳按鈕的美化思路是，先把之前的按鈕透明度opacity設定為0,然後，外層用div包裹，就實現了美化功能。

代碼如下：

DOM結構：

<a href="javascript:;" class="a-upload">    <input type="file" name="" id="">點擊這裡上傳檔案</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}

樣式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;}

修改後如下：

樣式二：

備忘：對於HTML5之input:file，還可以控制上傳的類型的，但是這個是html5的，低版本瀏覽器不支援，詳情請看：HTML5的 input:file上傳類型控制 http://www.haorooms.com/post/input_file_leixing

美化後顯示檔案名稱

上面美化，把預設顯示的檔案名稱也給隱藏掉了，那麼如何顯示檔案名稱呢？沒關係，我們可以用jquery來擷取檔案的檔案名稱。

我們可以寫個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     }})

其他input美化文章

關於 input checkbox和radio樣式美化，我也寫了一篇文章，請看 http://www.haorooms.com/post/css_mh_ck_radio

還有input search 右側有個關閉按鈕的美化，可以看http://www.haorooms.com/post/qd_ghfx 第五條。

相關文章：

• css input checkbox和radio樣式美化
• input file 檔案上傳,js控制上傳檔案的大小和格式
• HTML5的 input:file上傳類型控制
• css中box-shadow的應用技巧
• css的變數和繼承
• 談談inline-block的幾個神奇的用法
• 移動端開發流行單位rem的幾點看法
• css的不常用效果總結
• css段落文字（中英文混雜）實現左右對齊

css input[type=file] 樣式美化，input上傳按鈕美化