使用AJAX實現上傳文件
本文實例為大傢分享瞭使用AJAX實現上傳文件的具體代碼,供大傢參考,具體內容如下
需求:
在前端頁面選擇文件上傳到服務器的指定位置
前端代碼
<form id="uploadForm" method="post" enctype="multipart/form-data"> <label >上傳電子書</label> <input type="file" name="file" > <button id="upload" type="button" name="button" >上傳</button> </form>
$("#upload").click(function () { var formData = new FormData($('#uploadForm')[0]); $.ajax({ type: 'post', url: "https://****:8443/fileUpload", //上傳文件的請求路徑必須是絕對路勁 data: formData, cache: false, processData: false, contentType: false, }).success(function (data) { console.log(data); alert("上傳成功"+data); filename=data; }).error(function () { alert("上傳失敗"); }); });
首先創建一個FormData實例,也就是空對象,將頁面中現有form表單將他初始化。通過AJAX提交給後臺
後端代碼
@PostMapping(value = "/fileUpload") @ResponseBody public String fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) { if (file.isEmpty()) { System.out.println("文件為空空"); } String fileName = file.getOriginalFilename(); // 文件名 System.out.println(file.getOriginalFilename()); String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 後綴名 String filePath = "C://pdf//"; // 上傳後的路徑 fileName = UUID.randomUUID() + suffixName; // 新文件名 File dest = new File(filePath + fileName); System.out.println("pdf文件路徑為:"+dest.getPath()); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); System.out.println("上傳pdf文件+++++++++++"); System.out.println("pdf文件路徑為:"+dest.getPath()); } try { file.transferTo(dest); } catch (IOException e) { e.printStackTrace(); } String filename = "/pdf/" + fileName; return fileName; }
註意
1.@RequestParam(value = “file”) 中的file需要和input中的name屬性一致。
2.提交按鈕類型Type=“Button”如果為“submit”的話,提交完數據會刷新一次頁面。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。