前端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 + " textStatus=" + textStatus + " errorThrown=" + 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(); }
结果测试: