上传文件样式修改

来源：互联网发布：juniper network mac 编辑：程序博客网时间：2024/06/05 15:40

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>

阅读全文

0 0