js引用layer.js,ajaxfileupload.js,xlsx.core.min.js
layer.js是個很不錯的彈出層解決方案
git地址：https://github.com/sentsin/layer
ajaxfileupload.js負責文件上傳，不過由於很久沒有更新，對於jquery1.4之後的版本不兼容，需要在源碼處jQuery.extend中添加handleError函數
git地址：https://github.com/carlcarl/AjaxFileUpload
handleError: function( s, xhr, status, e ){
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
} ,
java後端springMVC
前端主要代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script src="${ctx}/static/layer/layer.js"></script>
<link rel="stylesheet" href="${ctx}/static/layer/theme/default/layer.css?v=3.1.1" id="layuicss-layer">
<link rel="stylesheet" href="${ctx}/static/layer/theme/moon/style.css" id="layuicss-thememoonstylecss">
<body class="J_scroll_fixed">
<div class="wrap_pop">
<div class="table_full" style="padding:20px;">
<table>
<tr>
<td>
<input id="stockCode" multiple="multiple" type="file" name="excel"/>
</td>
</tr>
<tr>
<td class="center">
</td>
</tr>
<tr>
<shiro:hasPermission name="/test/batchAddBusinessAuthority">
<td>
<button class="ace_btn btn_submit J_ajax_search_btn" onclick="ajaxFileUpload()" >立即導入</button>
</td>
</shiro:hasPermission>
</tr>
</table>
</div>
</div>
</div>
<script src="${ctx}/static/resources/ajaxfileupload.js?${version}" type="text/javascript"></script>
<script src="${ctx}/static/excel/xlsx/xlsx.core.min.js?${version}" type="text/javascript"></script>
<script type="text/javascript">
//將一個sheet轉成最終的excel文件的blob對象，然後利用URL.createObjectURL下載
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet;
// 生成excel的配置項
var wopts = {
bookType: 'xlsx', // 要生成的文件類型
bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啓生成速度會下降，但在低版本IOS設備上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
// 字符串轉ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url); // 創建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的屬性，指定保存文件名，可以不要後綴，注意，file:///模式下不會生效
var event;
if(window.MouseEvent) event = new MouseEvent('click');
else
{
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
parent.closeImportDialog();
}
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '${ctx}/test/batchAddBusinessAuthority', //用於文件上傳的服務器端請求地址
secureuri: false, //是否需要安全協議，一般設置爲false
fileElementId: 'stockCode', //文件上傳域的ID
dataType: 'json', //返回值類型 一般設置爲json
success: function (data, status) //服務器成功響應處理函數
{
if (typeof (data.success) != 'undefined') {
if(typeof (data.referer) != 'undefined'&&data.referer=='1'){
if (!data.success) {
layer.alert(data.msg, {
btn:['下載結果反饋'],
skin: 'layui-layer-molv' //樣式類名
,closeBtn: 0
}, function(){
var aoa = [
['用戶ID', '失敗原因']
];
var indexJ = 1;
data.obj.forEach(function(o){
var oj = [o.userId,o.msg]
aoa[indexJ] = oj;
indexJ++;
});
var sheet = XLSX.utils.aoa_to_sheet(aoa);
openDownloadDialog(sheet2blob(sheet), '導出結果反饋.xlsx');
});
} else {
layer.alert(data.msg, {
btn:['確定'],
skin: 'layui-layer-molv' //樣式類名
,closeBtn: 0
}, function(){
parent.closeImportDialog();
});
}
}else{
layer.msg(data.msg, {time: 2000, icon:2});
}
}else{
layer.msg('導入失敗 ', {time: 2000, icon:2});
}
},
error: function (data,status, e)//服務器響應失敗處理函數
{
if (!data.success) {
layer.msg(data.msg, {time: 2000, icon:3});
} else {
parent.closeImportDialog();
}
}
}
)
return false;
}
</script>
</body>
</html>
controller代碼
private List<Map<String,Object>> businessAuthorityResult = new ArrayList<Map<String,Object>>();
@ResponseBody
@RequestMapping(value = "/batchAddBusinessAuthority")
public AjaxJson batchAddBusinessAuthority(MultipartFile excel, HttpServletResponse httpResponse) {
List<BusinessAuthorityVO> list = null;
AjaxJson json = new AjaxJson();
int success = 0;
int failed = 0;
try {
businessAuthorityResult.clear();
// 獲取當前用戶
Session session = WebUtils.getShiroSession();
RalUserVO user =(RalUserVO)session.getAttribute(OmsStaticType.USER_SESSION);
list = (List<BusinessAuthorityVO>) ExcelUtil.getInstance().readExcelFromUpload(excel.getInputStream(),BusinessAuthorityVO.class, 0, 0);
ResponseVO respVO;
Map<String,Object> saveResultMap;
for (BusinessAuthorityVO vo:list) {
if(StringUtil.isEmpty(vo.getUserId()))continue;
saveResultMap = new HashMap<String,Object>();
vo.setOprUser(user.getUserId());
vo.setOprUserName(user.getName());
saveResultMap.put("userId", vo.getUserId());
try {
respVO = p2PService.saveBusinessAuthority(vo);
if(respVO.getCode()==StaticType.CodeType.OK.getCode()) {
success++;
}else {
failed++;
}
saveResultMap.put("msg", respVO.getCode()==StaticType.CodeType.OK.getCode()?"保存成功":respVO.getMessage());
} catch (Exception e) {
saveResultMap.put("msg", "導入異常");
failed++;
}
businessAuthorityResult.add(saveResultMap);
}
if(failed>0) {
json.setSuccess(false);
json.setObj(businessAuthorityResult);
}else {
json.setSuccess(true);
}
json.setReferer("1");
json.setMsg("導入成功"+success+"個，失敗"+failed+"個");
} catch (Exception e) {
json.setSuccess(false);
json.setMsg("導入業務權限配置異常,請檢查EXCEL文件");
logger.error("導入業務權限配置異常",e);
}
return json;
}