本文主要包含css上传文件样式修改等相关知识,msy_msy希望在学习及工作中可以帮助到您
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>