[TOC] 前臺頁面： ### 1. 點擊“上傳”觸發selectFile（） ~~~ <form id="signupListImportForm" enctype="multipart/form-data"> <input type="file" name="appFile" id="excelFile" style="display:none" multiple="multiple" onchange="fileUpload(${item.id})"> <button type="button" class="btn btn-primary btn-sm" type="button" value="上傳" onclick="selectFile()"> 上傳</button> </form> ~~~ ### 2. selectFile() 觸發上傳文件 ### 3. 上傳文件后onchange="fileUpload(${item.id})"觸發向后臺發送ajax請求 ajaxSubmit()馬上由AJAX來提交表單 ~~~ function fileUpload(id){ var option = { url : "${ctx}/app_version/upload", data: {"id": id}, type:"POST", success : function(map) { if(map.rtnFlag == 'apk'){ bootbox.alert({ size: 'small', title: '提示', message: "請上傳apk文件！" }); }else if(map.rtnFlag){ bootbox.alert({ size: 'small', title: '提示', message: "上傳成功！" }); location.reload(); }else { bootbox.alert({ size: 'small', title: '提示', message: "上傳失敗！" }); }; }, error:function(data){ bootbox.alert({ size: 'small', title: '提示', message: "上傳失敗！" }); } }; $("#signupListImportForm").ajaxSubmit(option); return false; } ~~~ ### 3. controller ~~~ /** * 上傳APP * @param id 唯一標識 * @param file APP文件 * @return */ @RequestMapping(value = "upload", method = RequestMethod.POST) @ResponseBody public HashMap<String,Object> upLoadApp(@RequestParam("id") Integer id, @RequestParam("appFile") MultipartFile file) { HashMap<String, Object> ret = new HashMap<>(); ret.put("rtnFlag", true); String fileName = file.getOriginalFilename(); String fileExt = fileName.substring(fileName.lastIndexOf(".")+1); String version = fileName.substring(0,fileName.lastIndexOf(".")); if(fileExt.equals("apk")){ if (!file.isEmpty()) { try { byte[] app = file.getBytes(); String apkPath = trackerHttp + "/" + FastDFSClientUtil.uploadFile(app, "apk"); System.out.println("文件路徑：" + apkPath+ "id:" + id); AppVersionOrg appVersionOrg = new AppVersionOrg(); appVersionOrg.setVersionAndroidUrl(apkPath); appVersionOrg.setId(id); appVersionOrg.setVersion(version); this.appVersionService.modify(appVersionOrg); } catch (Exception e) { e.printStackTrace(); ret.put("rtnFlag", "false"); ret.put("message", e.getMessage()); } } }else { ret.put("rtnFlag", "apk"); } return ret; } ~~~  ### 4. springmvc 支持文件上傳 ~~~ <!-- 支持上傳文件 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!--頁面文件上傳最大長度50000000kb--> <property name="maxUploadSize" value="50000000" /> </bean> ~~~ ## 5. ajax提交form表單 ~~~ //<form id="personal_info"> 使用form,導致ajax提交失敗 <div id="personal_info"> <div class="row"> <div class="col-sm-2"> <img id="headImg" name="headImg" src="${moocUser.headImg}" alt="headImg" class="img-circle img-responsive" style="width: 100px;height: 100px"> </div> <input class="col-sm-2" type="file" class="file" id="image-input" onchange="changImg(event)"> </div> <div class="form-group"> <label for="nickName">昵稱</label> <input type="text" class="form-control" id="nickName" value="${moocUser.nickName}" tag="${moocUser.id}" readonly="readonly"> </div> <div class="form-group"> <label for="mobile">電話</label> <input type="text" class="form-control" id="mobile" value="${moocUser.mobile}" readonly="readonly"> </div> <div class="form-group"> <label for="email">郵箱</label> <input type="email" class="form-control" id="email" value="${moocUser.email}" readonly="readonly"> </div> //問題就應該出現在type="submit" <button type="submit" class="btn btn-default" onclick="editInfo()">保存</button> </div> //</form> ~~~ 錯誤一、網頁是form表單提交的話，會和ajax的提交方式沖突，導致回調失敗（即不執行成功或者失敗回調函數）！