将input[type="file"]上传文件隐藏在按钮下面，隐藏掉默认的样式

https://blog.csdn.net/NB6063/article/details/80649290?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-12.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-12.control
直接上代码：

<button style="position:relative;" class="btn btn-info btn-fill btn-wd" id="btn" name="btn">

上传excel

<input id="upfile" style="opacity:0;width:100%;height:100%;position:absolute;top:0;left:0" type="file" name="upfile" οnchange="fileUpload();"/>

</button>

这里的onchange事件是在选择完文件后直接上传文件

function fileUpload(){
var fileName = $("#upfile").val();
if(fileName == null || fileName==""){
alert("请选择文件");
}else{
var fileType = fileName.substr(fileName.length-4,fileName.length);
if(fileType == ".xls" || fileType == "xlsx"){
var formData = new FormData();
formData.append("file",$("#upfile").prop("files")[0]);
$.ajax({
type:"post",
url:"/4sinfo/ajaxUpload.do",
data:formData,
cache:false,
processData:false,
contentType:false,
dataType:"json",
success:function(data){
if(null != data){
if(data.dataStatus == "1"){
if(confirm("上传成功！")){
window.location.reload();
}
}else{
alert("上传失败！");
}
}
},
error:function(){
alert("上传失败！");
}
});
}else{
alert("上传文件类型错误！");
}
}
}
————————————————
版权声明：本文为CSDN博主「举头忘明月」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/NB6063/article/details/80649290

将input[type="file"]上传文件隐藏在按钮下面，隐藏掉默认的样式

原文：https://www.cnblogs.com/yuxinwei/p/15226491.html