溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery實(shí)現(xiàn)異步上傳一個或多個文件的方法

發(fā)布時間：2020-08-19 10:49:49 來源：億速云 閱讀：193 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹jQuery實(shí)現(xiàn)異步上傳一個或多個文件的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)異步上傳一個或多個文件的具體代碼，供大家參考，具體內(nèi)容如下

首先使用SpringMvc文件上傳，需要引入第三方上傳文件的jar：

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.1</version>
</dependency>
<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.4</version>
</dependency>

響應(yīng)json需要導(dǎo)入的包：

<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-databind</artifactId>
 <version>2.9.0</version>
</dependency>
<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-core</artifactId>
 <version>2.9.0</version>
</dependency>
<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-annotations</artifactId>
 <version>2.9.0</version>
</dependency>

接下來看jsp文件：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>首頁</title>
 </head>
 <body>
 <p>同步上傳一個文件</p>
 <form action="upload/testUpload" method="post" enctype="multipart/form-data">
  <input type="file" name="upload"><br>
  <input type="submit" value="上傳">
 </form>

 <hr>
 <p>異步上傳一個文件</p>
 <form id="formData" method="post" enctype="multipart/form-data">
  <input type="file" name="upload"><br>
  <input id="sub" type="button" value="上傳">
 </form>

 <hr>
 <p>異步上傳一個文件,且表單有其他數(shù)據(jù)</p>
 <form id="formData2" method="post" enctype="multipart/form-data">
  編&emsp;號:<input type="text" name="id"><br>
  賬戶名:<input type="text" name="name"><br>
  金&emsp;額:<input type="text" name="money"><br>
  <input type="file" name="upload"><br>
  <input id="sub2" type="button" value="上傳">
 </form>

 <hr>
 <p>異步上傳多個文件,且表單有其他數(shù)據(jù)</p>
 <form id="formData3" method="post" enctype="multipart/form-data">
  編&emsp;號:<input type="text" name="id"><br>
  賬戶名:<input type="text" name="name"><br>
  金&emsp;額:<input type="text" name="money"><br>
  <input type="file" name="upload" multiple="multiple"><br>
  <input id="sub3" type="button" value="上傳">
 </form>

 <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 <script>

 $(function () {
  //異步上傳一個文件
  $("#sub").click(function () {
  var file = new FormData($("#formData")[0]);
  $.post({
   url:'upload/testUpload',
   contentType:false, //jQuery不要去設(shè)置Content-Type請求頭
   processData:false, //jQuery不要去處理發(fā)送的數(shù)據(jù)
   cache:false,  //不緩存
   dataType:'json', //返回類型json
   data:file,   //文件數(shù)據(jù)
   success:function (res) {
   console.log(res);
   }
  });
  });

  //異步上傳一個文件，帶表單參數(shù)
  $("#sub2").click(function () {
  //將form表單轉(zhuǎn)換為FormData對象
  var data = new FormData(document.querySelector("#formData2"));
  $.post({
   url:'upload/testUpload2',
   contentType:false, //jQuery不要去設(shè)置Content-Type請求頭
   processData:false, //jQuery不要去處理發(fā)送的數(shù)據(jù)
   cache:false,  //不緩存
   dataType:'json', //返回類型json
   data:data,   //表單數(shù)據(jù)
   success:function (res) {
   console.log(res);
   },
   error:function (error) {
   console.log(error);
   }
  });
  });

  //異步上傳多個文件，帶表單參數(shù)
  $("#sub3").click(function () {
  //將form表單轉(zhuǎn)換為FormData對象
  var data = new FormData(document.querySelector("#formData3"));
  $.post({
   url:'upload/testUpload3',
   contentType:false, //jQuery不要去設(shè)置Content-Type請求頭
   processData:false, //jQuery不要去處理發(fā)送的數(shù)據(jù)
   cache:false,  //不緩存
   dataType:'json', //返回類型json
   data:data,   //表單數(shù)據(jù)
   success:function (res) {
   console.log(res);
   },
   error:function (error) {
   console.log(error);
   }
  });
  });

 });
 </script>

 </body>
</html>

下面是controller：

@Controller
@RequestMapping("/upload")
public class FileController {

 /**
  * 同步文件一個上傳和異步上傳一個文件，共同使用這一個控制器方法
  * @param request
  * @param upload
  * @return
  * @throws IOException
  */
 @RequestMapping(value = "/testUpload",method = RequestMethod.POST)
 public String upload(HttpServletRequest request, MultipartFile upload) throws IOException {
  //獲取文件的保存路徑
  String path = request.getServletContext().getRealPath("/uploads");
  //獲取上傳文件的名稱
  String filename = upload.getOriginalFilename();
  //獲取隨機(jī)字符串
  String prefix = UUID.randomUUID().toString().replaceAll("-", "");
  filename = prefix + "_" + filename;
  //創(chuàng)建文件對象
  File file = new File(path);
  //判斷路徑是否存在，不存在則創(chuàng)建
  if(!file.exists()){
   file.mkdir();
  }
  //上傳文件
  upload.transferTo(new File(file,filename));
  return "success";
 }


 /**
  * 異步文件上傳和表單數(shù)據(jù)
  * @param request
  * @param upload
  * @return
  * @throws IOException
  */
 @RequestMapping(value = "/testUpload2",method = RequestMethod.POST)
 public @ResponseBody Account upload2(HttpServletRequest request, MultipartFile upload, Account account) throws IOException {
  //獲取文件的保存路徑
  String path = request.getServletContext().getRealPath("/uploads");
  //獲取上傳文件的名稱
  String filename = upload.getOriginalFilename();
  //獲取隨機(jī)字符串
  String prefix = UUID.randomUUID().toString().replaceAll("-", "");
  filename = prefix + "_" + filename;
  //創(chuàng)建文件對象
  File file = new File(path);
  //判斷路徑是否存在，不存在則創(chuàng)建
  if(!file.exists()){
   file.mkdir();
  }
  //上傳文件
  upload.transferTo(new File(file,filename));
  return account;
 }


 /**
  * 異步多個文件上傳和表單數(shù)據(jù)
  * @param request
  * @param upload 采用數(shù)組接收
  * @return
  * @throws IOException
  */
 @RequestMapping(value = "/testUpload3",method = RequestMethod.POST)
 public @ResponseBody Account upload3(HttpServletRequest request, MultipartFile[] upload, Account account) throws IOException {
  //獲取文件的保存路徑
  String path = request.getServletContext().getRealPath("/uploads");
  //創(chuàng)建文件對象
  File file = new File(path);
  //判斷路徑是否存在，不存在則創(chuàng)建
  if(!file.exists()){
   file.mkdir();
  }

  for (MultipartFile multipartFile : upload) {
   //獲取上傳文件的名稱
   String filename = multipartFile.getOriginalFilename();
   //獲取隨機(jī)字符串
   String prefix = UUID.randomUUID().toString().replaceAll("-", "");
   filename = prefix + "_" + filename;
   //上傳文件
   multipartFile.transferTo(new File(file,filename));
  }
  return account;
 }
}
public class Account implements Serializable {
 private int id;
 private String name;
 private float money;
 //getter or setter....
}

注意事項：

上傳文件時，表單的 enctype 修改為：multipart/form-data；
后端使用 MultipartFile upload 對象接收，upload 必須和 <input> 的name屬性一致；
上傳多個文件，給 <input> 添加：multiple=“multiple”

效果：

jQuery實(shí)現(xiàn)異步上傳一個或多個文件的方法

以上是jQuery實(shí)現(xiàn)異步上傳一個或多個文件的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手