前端JSP代碼
<form id='formSumbit' class='form-horizontal' action='/ncpay/route/chlsubmcht/batchImpor' method='post' enctype='multipart/form-data'>
<input type='file' name='file'>
<input type='submit' value='上傳文件'/>
</form>
JS代碼
$(function(){ $('#formSumbit').submit(function (event) { //首先驗證文件格式 var fileName = $(this).find("input[name=file]").val(); if (fileName === '') { alert('請選擇文件'); return; } var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)).toLowerCase(); if (fileType !== 'xls' && fileType !== 'xlsx') { alert('文件格式不正確,excel文件!'); return; } event.preventDefault(); var form = $(this); if (form.hasClass('upload')) { //普通表單 $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize(), dataType: "JSON" }).success(function () { //成功提交 }).fail(function (jqXHR, textStatus, errorThrown) { //錯誤信息 }); } else { // mulitipart form,如文件上傳類 var formData = new FormData(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: formData, dataType: "JSON", mimeType: "multipart/form-data", contentType: false, cache: false, processData: false, error : function(XHR, textStatus, errorThrown) { alert("網絡錯誤!XHR=" + XHR + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown); }, success : function(data) { alert(data[0].message); } }); } }); });
以上做完,就能夠正常的請求后台了,但是又出現一個新的問題,前端頁面總是執行error,可是請求是成功的。然后繼續修改。
在Controller類中設置response.setContentType("text/html; charset=utf-8"); 這里需要注意$.ajax塊中dataType: "JSON",這里必須將reponse 的contenType響應頭信息設置成
"text/html; charset=utf-8" 否則在頁面總是會彈出 “出錯”。
@RequestMapping(value="/batchImpor",method=RequestMethod.POST) public @ResponseBody String v_batch_impor(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response){ response.setContentType("text/html; charset=utf-8"); ReturnJson json = new ReturnJson(); try { ImportExcel ei = new ImportExcel(file, 0, 0); List<bz_chl_sub_mcht> list = ei.getDataList(bz_chl_sub_mcht.class); for (bz_chl_sub_mcht sub_mcht : list) { recordModify(sub_mcht, ModifyType.ADD); } //service_chlsubmcht.saveAll(list); json.setStatus("0"); json.setMessage("數據導入成功!"); } catch (Exception e) { json.setStatus("1"); json.setMessage("數據導入失敗,請檢查數據是否正確或部分數據是否唯一!"); e.printStackTrace(); } return JSONArray.fromObject(json).toString(); }
結果測試: