前端： <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")@ResponseBodypublic 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("上傳出錯了");}}

　　

轉載于:https://www.cnblogs.com/yang-xiansen/p/11205861.html

總結

以上是生活随笔為你收集整理的form表单提交且接口回调显示提交成功的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。