1.本次上傳文件Excel批量導入文件。
上傳頁面layui寫法,彈框頁面如圖。
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">3、選擇並上傳</h3>
<p>根據下載/導出的模板,編輯人員信息</p><br/>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="test10">選擇人員</button>
<button type="button" class="layui-btn layui-btn-sm" id="test100">開始上傳</button>
</div>
</div>
</li>
2.接下來完成js方法。
top.$("#addAndEdit_class #exp_people_btn").off("click");
top.$("#addAndEdit_class #exp_people_btn").on("click", function () {
var expUserWindow = top.layer.open({
type: 1,
title: '導入人員',
maxmin: true,
area: ['750px', '400px'],
content: $("#addAll2").html(),
btn: ['確定', '取消'],
yes: function () { // 確定按鈕點擊事件
top.layer.close(expUserWindow);
$("#addAll2").hide();
return false;
},
cancel: function () { // 右上角關閉回調
top.layer.close(expUserWindow);
$("#addAll2").hide();
},
btn2: function () {
top.layer.close(expUserWindow);
$("#addAll2").hide();
},
success: function (layero, index) { // 彈框彈出成功後的回調
window.parent.reRenderForm();
top.layui.use('upload', function(){
var $ = top.layui.jquery,upload = top.layui.upload;
//選完文件後不自動上傳
upload.render({
elem: '#test10'
,url: "${pageContext.request.contextPath}/customer/importCustomers"
,accept: 'file' //普通文件
,auto: false
,field:'filess'
,exts: 'xls'
,bindAction: '#test100'
,done: function(res){
console.log(res)
openPopup(res);
}
,before: function(){
var index = top.layer.load(0, {shade: false}); //0代表加載的風格,支持0-2
//loading層
index = top.layer.load(1, {
shade: [0.5,'#ccc'],//0.1透明度的白色背景
});
setTimeout(function () {
top.layer.close(index)
}, 2000)
}
});
});
}
});
})
3.完成java後臺請求接口。
注意因爲upload控件返回必須是json數據所以要加上 @ResponseBody 註解
/**
* Customers Excle 批量導入
* @param file
* @return
* @throws Exception
*/
@RequestMapping(value="/importCustomers",method = {RequestMethod.POST})
@ResponseBody
public Map<String,Object> importEmpls(@RequestParam(value = "filess", required = true) MultipartFile[] file) throws Exception{
PageData pageData = getPageData();
pageData.put("filess",file);
pageData.put("createId", getCreateID());
pageData.put("createTime", getCreateTime());
Map<String,Object> map= kpxCustomerService.importCustomers(pageData);
logger.debug(map.toString());
return map;
}
4.如果不加上註解,實際上後臺已經接受到請求,而瀏覽器則是報錯404找不到。
5.加上註解之後則是正常的,點擊上傳顯示正在上傳,到最後的完成上傳。