ajaxfileupload帶引數上傳檔案
阿新 • • 發佈:2018-11-06
前幾天在用ajaxfileupload上傳檔案時發現ajaxfileupload無法帶參傳遞,於是我從github上找到了一個現成的可以帶參傳遞的ajaxfileupload,並學習了ajaxfileupload怎麼上傳檔案。
可以帶參傳遞的ajaxfileupload的github地址:https://github.com/carlcarl/AjaxFileUpload
Html
<!-- form表單的enctype屬性必須設定為multipart/form-data。 --> <form class="am-form tjlanmu" enctype="multipart/form-data"> <select name="categoryName" id="categoryId" data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}"> <c:forEach var="c" items="${categoryList }"> <option value="${c.id }">${c.categoryName }</option> </c:forEach> </select> <input name="photo" id="imageFile1" type="file"><!-- id必須唯一,Name必須有 --> <button id="addProjectButton" type="button">提交</button> </form>
form表單的enctype屬性必須設定為multipart/form-data。
上傳檔案的input的id必須唯一,name屬性必須有。
ajax
//新增project $("#addProjectButton").click(function(){ var project = { "category_id":$("#categoryId option:selected")[0].value }; $.ajaxFileUpload({ url:"addProject.action",//用於檔案上傳的伺服器端請求地址 secureuri:false,//是否需要安全協議,一般設定為false data:project,//傳遞的引數 fileElementId:"imageFile1",//檔案上傳域的ID dataType:"JSON",//返回值型別 success:function(data,status){ //伺服器成功響應處理函式 if(data==1){ alert("新增成功"); window.location='/vitae/projectInformation.action'; }else{ alert(data); alert("新增失敗"); } }, error:function(data,status,e){ //伺服器響應失敗處理函式 //e 異常資訊 alert("error"); } }) });
ajaxfileupload的fileElementId是上傳檔案的input的id。
Controller
/** * 新增project * */ @RequestMapping("/addProject.action") @ResponseBody public String addProject(int category_id,@RequestParam("photo") MultipartFile uploadfile){ String dirpath = "E:/viate/uploadImage/";//上傳檔案儲存的地址,最好先建立好 Project project = new Project(); System.out.println(category_id); project.setCategory_id(category_id); //判斷所上傳檔案是否存在 if(!uploadfile.isEmpty()){ //獲取上傳檔案的原始名稱 String originalFilename = uploadfile.getOriginalFilename(); //設定上傳檔案的儲存地址目錄 File filePath = new File(dirPath); //如果儲存檔案的地址不存在,就先建立目錄 if(!filePath.exists())filePath.mkdirs(); //使用UUID重新命名上傳的檔名稱(uuid_原始檔名稱) String newFilename = UUID.randomUUID()+"_"+originalFilename; try { //使用MultipartFile介面的方法完成檔案上傳到指定位置 uploadfile.transferTo(new File(dirPath+newFilename)); } catch (IllegalStateException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } project.setPhoto("/uploadImages/"+newFilename); projectService.addProject(project); return "1"; } return "0"; }
MultipartFile uploadfile就是接收上傳的檔案,@RequestParam("photo")的photo是上傳檔案input的name
本人用的是tomcat,要在tomcat的server.xml中的<Host></Host>之間加上圖片伺服器即:
<Context docBase="E:/viate/uploadImage/" reloadable="true" path="/uploadImages"/>
其中docBase為檔案儲存路徑,path為圖片伺服器訪問名