1. 程式人生 > 程式設計 >使用AJAX實現上傳檔案

使用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.substriPVyawm
ng(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(); } http://www.cppcns.com String filename = "/pdf/" + fileName; return fileName; }

注意

1.@RequestParam(value = “file”) 中的file需要和input中的name屬性一致。
2.提交按鈕型別Type=“Button”如果為“submit”的話,提交完資料會重新整理一次頁面。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。