1.界面效果:
1)点击批量导入,弹出文件选择框,选择文件,点击打开,文件开始上传。
2)重复导入人员校验提示信息
2.页面代码:
<a class="zdr-dr-btn" onclick="fileClick()">批量导入</a>
<a class="zdr-down-btn" onclick="viewOnlineEvidence()">模板下载</a>
<input type="file" id="upfile" name="upfile" placeholder="" onchange="importExp(1);" style="display: none;"/>
3.JS代码:
//导入文件
function importExp(type) {
var index = layer.load(1, {time: 20*1000}); // 调用加载层
var formData = new FormData();
var name = $("#upfile").val();
formData.append("name",name);
formData.append("file",$("#upfile")[0].files[0]);
$.ajax({
url : '/zdry/personInfo/uploadExcelController/uploadExcel?type='+type,
type : 'POST',
data : formData,
//ajax2.0可以不用设置请求头,但是jq帮我们自动设置了,这样的话需要我们自己取消掉
contentType:false,
//取消帮我们格式化数据,是什么就是什么
processData:false,
success : function(data) {
//关闭 加载层
layer.close(index);
if(data.state=="00"){
layer.msg("导入成功");
window.location.href="/zdry/personInfo/weiwen";
}else if(data.state=="01"){
layer.msg("excel中身份证不能为空");
}else if(data.state=="02"){
layer.alert("以下人员已经存在,不可重复上传!<br/>"+data.exsitCertNums, {icon: 0});
}else{
layer.msg("导入失败");
}
}
});
$("#upfile").val("");
}
function viewOnlineEvidence() {
window.location.href="/zdry/personInfo/uploadExcelController/downloadExcel";
}
function fileClick(){
$("#upfile").click();
}
4.Controller层代码:
@Autowired
private ExcelfileService exService;
@PostMapping(value =