input美化上传按钮美化

今天工作需求碰到 样式改变上传按钮

效果：

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件
</a>

 <style type="text/css">
     .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:;
         top:;
         opacity:;
         filter: alpha(opacity=0);
         cursor: pointer
     }
 
     .a-upload:hover {
         color: #444;
         background: #eee;
         border-color: #ccc;
         text-decoration: none
     }
         </style>

附带小功能：截取上传文件名：

     <script type="text/javascript">
                  $(document).ready(function(){
                       var  src ="";
                      $(".a-upload").on("change","input[type='file']",function(){
                          src = $(this).val();
                         console.log(src);
                         if (src.indexOf("jpg") != -1 || src.indexOf("png") != -1 ) {
                                $(".filetext").html("").hide();
                                var arr = src.split("\\");
                                var filename = arr[arr.length-1];
                                var  name = filename.split(".");
                                var  lastname =  name[0];
                                $(".showfileName").html(lastname);
                         }else{
                                   $(".showfileName").html("");
                                    $(".filetext").html("宁未上传文件，或者宁上传的文件类型有误")
                         }
                      })
 
                  })
         </script>