下載FileInput.js
http://plugins.krajee.com/file-input/demo
https://github.com/kartik-v/bootstrap-fileinput
頁面代碼
添加FileInput JS/CSS
<form enctype="multipart/form-data" id="uploadForm"> <div id="uploadFileDiv" hidden="true" style="width: 60%;"> <input id="pdFile" name="file" type="file"> <div id="fileError" class="help-block"></div> <br /> </div> </form> |
添加JS
$("#pdFile").fileinput({ showPreview : false, allowedFileExtensions : [ "zip", "bar", "bpmn", "bpmn20.xml" ], 限制文件類型 elErrorContainer : "#fileError", browseClass : "btn btn-success", browseLabel : "查找文件", browseIcon : '<i class="glyphicon glyphicon-search"></i>', removeClass : "btn btn-danger", removeLabel : "刪除", removeIcon : '<i class="glyphicon glyphicon-trash"></i>', uploadClass : "btn btn-info", uploadLabel : "部署", uploadIcon : '<i class="glyphicon glyphicon-upload"></i>', }); |
$("#uploadForm").submit(function(event) { var formData = new FormData(this); 這里用的是this，如果是Form的話需要Form[0] event.preventDefault(); 阻止當前提交事件，自行實現，否則會跳轉 var grid = $('[data-role="pdGrid"]'); $.ajax({ url : contextPath + '/activiti/pd/upload.koala', type : 'POST', data : formData, contentType : false, 這兩個參數需要被定義，否則報錯 processData : false, success : function(data) { if (data.result == 'success') { grid.message({ type : 'success', content : '部署成功' }); $("#uploadFileDiv").slideToggle("slow"); grid.grid('refresh'); } else { grid.message({ type : 'error', content : data.result }); } }, error : function() { grid.message({ type : 'error', content : '部署失敗' }); } }); }); |
后台代碼
@ResponseBody @RequestMapping("/upload") public Map<String, Object> uploadFile(@RequestParam MultipartFile file) { Map<String, Object> dataMap = Maps.newHashMap(); String fileName = file.getOriginalFilename(); try { InputStream fileInputStream = file.getInputStream(); XXXXXXXXXXXXXX } catch (Exception e) { dataMap.put("result", "部署流程時發生錯誤"); e.printStackTrace(); } dataMap.put("result", "success"); return dataMap; } |
Spring.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" /> |
運行效果
點擊【部署】，實現無刷新提交form，並且刷新當前頁的效果
