input类型为file时标签的美化问题

由于个人能力有限，异步上传时有些细节的处理方式还没想明白，所以先用了同步上传的方式来做功能，但是！！！type=“file”你能不能不要这么丑，bootstrap你也不管一下！！！

从网上看了些文章之后，发现基本都是同一种解决方式，但是其他文章的结构上有问题，这里自己再整理一遍

上效果图，具体颜色自己CSS里改：

上结构

    
    
请选择图片
    

 

上CSS

.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;
}

上JS

$("#file1").on("change","input[type='file']",function(){
  var filePath=$(this).val();
     if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
         $(".fileerrorTip1").html("").hide();
         var arr=filePath.split('\\');
         var fileName=arr[arr.length-1];
         $(".showFileName1").html(fileName);
     }else{
         $(".showFileName1").html("");
         $(".fileerrorTip1").html("您未上传文件，或者您上传文件类型有误！").show();
         return false 
     };
 });