本文實(shí)例為大家分享了使用AJAX實(shí)現(xiàn)上傳文件的具體代碼，供大家參考，具體內(nèi)容如下

需求：

在前端頁面選擇文件上傳到服務(wù)器的指定位置

前端代碼

<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("上傳失敗");
     });
    });

首先創(chuàng)建一個(gè)FormData實(shí)例，也就是空對象，將頁面中現(xiàn)有form表單將他初始化。通過AJAX提交給后臺(tái)

后端代碼

@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”的話，提交完數(shù)據(jù)會(huì)刷新一次頁面。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。