欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年08月17日 11:21:39   作者：Linging_24  
這篇文章主要為大家詳細(xì)介紹了jQuery異步上傳一個(gè)或多個(gè)文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)異步上傳一個(gè)或多個(gè)文件的具體代碼，供大家參考，具體內(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>

接下來(lái)看jsp文件：

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

 <hr>
 <p>異步上傳一個(gè)文件</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>異步上傳一個(gè)文件,且表單有其他數(shù)據(jù)</p>
 <form id="formData2" method="post" enctype="multipart/form-data">
 編&emsp;號(hào):<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>異步上傳多個(gè)文件,且表單有其他數(shù)據(jù)</p>
 <form id="formData3" method="post" enctype="multipart/form-data">
 編&emsp;號(hào):<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 () {
 //異步上傳一個(gè)文件
 $("#sub").click(function () {
 var file = new FormData($("#formData")[0]);
 $.post({
  url:'upload/testUpload',
  contentType:false, //jQuery不要去設(shè)置Content-Type請(qǐng)求頭
  processData:false, //jQuery不要去處理發(fā)送的數(shù)據(jù)
  cache:false, //不緩存
  dataType:'json', //返回類型json
  data:file,  //文件數(shù)據(jù)
  success:function (res) {
  console.log(res);
  }
 });
 });

 //異步上傳一個(gè)文件，帶表單參數(shù)
 $("#sub2").click(function () {
 //將form表單轉(zhuǎn)換為FormData對(duì)象
 var data = new FormData(document.querySelector("#formData2"));
 $.post({
  url:'upload/testUpload2',
  contentType:false, //jQuery不要去設(shè)置Content-Type請(qǐng)求頭
  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);
  }
 });
 });

 //異步上傳多個(gè)文件，帶表單參數(shù)
 $("#sub3").click(function () {
 //將form表單轉(zhuǎn)換為FormData對(duì)象
 var data = new FormData(document.querySelector("#formData3"));
 $.post({
  url:'upload/testUpload3',
  contentType:false, //jQuery不要去設(shè)置Content-Type請(qǐng)求頭
  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 {

 /**
 * 同步文件一個(gè)上傳和異步上傳一個(gè)文件，共同使用這一個(gè)控制器方法
 * @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)建文件對(duì)象
 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)建文件對(duì)象
 File file = new File(path);
 //判斷路徑是否存在，不存在則創(chuàng)建
 if(!file.exists()){
  file.mkdir();
 }
 //上傳文件
 upload.transferTo(new File(file,filename));
 return account;
 }


 /**
 * 異步多個(gè)文件上傳和表單數(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)建文件對(duì)象
 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....
}

注意事項(xiàng)：

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

效果：

更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。

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

相關(guān)文章

最新評(píng)論