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: 0;
        top: 0;
        opacity: 0;
        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>