我们知道，在使用到input file上传文件的时候，会出现这样很丑的默认样式，作为前端开发的我们，主要责任就是去优化这些样式，以更美观的方式呈现出来，但是，这个默认样式没有可以去修改的属性，还是比较麻烦的。
这个时候，就需要用到一些障眼法了，将原来的样式隐藏起来，再重新写一个按钮代替，与原来的位置重合即可。
原本的样式是这样的：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" class="file-upload" />
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
#importExcel {
color: #fff;
width: 51px;
height: 30px;
display: inline-block;
border: none;
background: cornflowerblue;
background-size: 100% 100%;
}
.change {
position: absolute;
display: block;
width: 103px;
top: 2px;
left: 5px;
height: 40px;
opacity: 0;
cursor: pointer;
}
.file-name {
position: absolute;
top: 9px;
width: 133px;
height: 30px;
padding: 0 8px;
line-height: 25px;
margin-left: 86px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.btnMask {
color: #fff;
width: 86px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 131px;
display: inline-block;
border: none;
background: cornflowerblue;
background-size: 100% 100%;
cursor: pointer;
}
</style>
</head>
<body>
<form s action="/criminal/import" id="uploadForm" enctype="multipart/form-data" method="post">
<a class="btnMask">选择文件</a>
<input class="change" id="mFile" type="file" name="mFile">
<div class="file-name"></div>
<input type="button" value="导入" id="importExcel" name="btn">
</form>
</body>
<script>
$("#mFile").change(function() {
var arrs = $(this).val().split('\');
var filename = arrs[arrs.length - 1];
$(".file-name").html(filename);
});
//导入按钮
$('#importExcel').click(function() {
if(checkData()) {
$('#uploadForm').ajaxSubmit({
url: "http://localhost:3000/users",
success: function(data) {
alert(JSON.stringify(data))
for(var i = 0; i < data.length; i ) { // 这里的i是代表数组的下标
if(i == data.length - 1)
alert("已插入" data[i] "条罪犯数据")
else
alert(data[i])
}
}
});
}
});
//JS校验form表单信息
function checkData() {
var fileDir = $("#mFile").val();
var suffix = fileDir.substr(fileDir.lastIndexOf("."));
if("" == fileDir) {
msg(5, "选择需要导入的Excel文件！");
return false;
}
if(".xls" != suffix && ".xlsx" != suffix) {
msg(5, "选择Excel格式的文件导入！");
return false;
}
return true;
}
</script>
</html>
这是改完以后的样式，根据需要来设置属性，这里已经写好了选择文件，导入到表格里面的效果啦。
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
