上传文件样式修改

html:

<label>
  <span>上传</span>
  <input type="file" id="fileUpload">  
</label>
  <span id="uploadFileName"></span>
  <span class="fileerrorTip"></span>

css:

label{
    border-radius: .4rem;
    background-color: #979fa8;
    color: #fff;
    display: inline-block;
    padding: .8rem 4rem;
    cursor: pointer;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    transition: background-color .5s cubic-bezier(.24,.68,.67,.9);
  }
  span{
        cursor: pointer;
    pointer-events: none;
  }
  input[type=file] {
    display: none;
    visibility: hidden;
  }

js:

<script type="text/javascript">
    $("#fileUpload").on("change",function(){
    var filePath=$(this).val();
    if(filePath.indexOf(".csv")!=-1 ){
        $(".fileerrorTip1").html("").hide();
        var arr=filePath.split('\\');
        var fileName=arr[arr.length-1];
        $("#uploadFileName").html(fileName);
    }else{
        $("#uploadFileName").html("");
        $(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
        return false
    }
})
 $("body").on('change','#fileUpload',function () {
       $("#uploadFileName").html("");
 
   });
          
          
  var e = document.getElementById("fileUpload");
   e.addEventListener("change",function(){//attachEvent
          alert("nihao");
   })
</script>