前端: <form method="post" enctype="multipart/form-data" id="formSubmit"> <div class="row"> <div class="col-lg-12" style="padding-left:25px;padding-top: 5px"> <label>请选择文件</label> <input type="file" name="file" title="点击选择文件" multiple="" accept="*/*" class="form-control"> </div> </div> <div class="row"> <div style="padding-left:25px;padding-top:10px"> <input type="submit" class="btn btn-primary"> </div> </div> </form>
JS: $('#formSubmit').submit(function (event) { //首先验证文件格式 var fileName = $(this).find("input[name=file]").val(); if (fileName === '') { alert('请选择文件'); return; } // mulitipart form,如文件上传类 var formData = new FormData(this); $.ajax({ async: false, type: "POST", url: "/upload", data: formData, dataType: "JSON", mimeType: "multipart/form-data", contentType: false, cache: false, processData: false, success: function (data) { if (data.success) { layer.alert("上传成功") } else { layer.alert(data.error) } } }); return false; });
js代码的最后需要return false 防止表单重复提交,刷新页面。
java: @RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json;charset=utf-8") @ResponseBody public SimpleAjaxResponse uploadSingleFile(HttpServletRequest request, Model model) { try { DefaultMultipartHttpServletRequest httpServletRequest = (DefaultMultipartHttpServletRequest) request; MultipartFile multipartFile = httpServletRequest.getFile("file"); return new SimpleAjaxResponse(true); } catch (Exception e) { LOGGER.error(e.getMessage(), e); e.printStackTrace(); return new SimpleAjaxResponse("上传出错了"); } }