jQuery實現非同步上傳一個或多個檔案
阿新 • • 發佈：2020-08-18
本文例項為大家分享了jQuery實現非同步上傳一個或多個檔案的具體程式碼，供大家參考，具體內容如下
首先使用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>
響應json需要匯入的包：
<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>非同步上傳一個檔案,且表單有其他資料</p>
<form id="formData2" method="post" enctype="multipart/form-data">
編 號:<input type="text" name="id"><br>
賬戶名:<input type="text" name="name"><br>
金 額:<input type="text" name="money"><br>
<input type="file" name="upload"><br>
<input id="sub2" type="button" value="上傳">
</form>
<hr>
<p>非同步上傳多個檔案,且表單有其他資料</p>
<form id="formData3" method="post" enctype="multipart/form-data">
編 號:<input type="text" name="id"><br>
賬戶名:<input type="text" name="name"><br>
金 額:<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不要去設定Content-Type請求頭
processData:false,//jQuery不要去處理髮送的資料
cache:false,//不快取
dataType:'json',//返回型別json
data:file,//檔案資料
success:function (res) {
console.log(res);
}
});
});
//非同步上傳一個檔案，帶表單引數
$("#sub2").click(function () {
//將form表單轉換為FormData物件
var data = new FormData(document.querySelector("#formData2"));
$.post({
url:'upload/testUpload2',//返回型別json
data:data,//表單資料
success:function (res) {
console.log(res);
},error:function (error) {
console.log(error);
}
});
});
//非同步上傳多個檔案，帶表單引數
$("#sub3").click(function () {
//將form表單轉換為FormData物件
var data = new FormData(document.querySelector("#formData3"));
$.post({
url:'upload/testUpload3',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();
//獲取隨機字串
String prefix = UUID.randomUUID().toString().replaceAll("-","");
filename = prefix + "_" + filename;
//建立檔案物件
File file = new File(path);
//判斷路徑是否存在，不存在則建立
if(!file.exists()){
file.mkdir();
}
//上傳檔案
upload.transferTo(new File(file,filename));
return "success";
}
/**
* 非同步檔案上傳和表單資料
* @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();
//獲取隨機字串
String prefix = UUID.randomUUID().toString().replaceAll("-",filename));
return account;
}
/**
* 非同步多個檔案上傳和表單資料
* @param request
* @param upload 採用陣列接收
* @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");
//建立檔案物件
File file = new File(path);
//判斷路徑是否存在，不存在則建立
if(!file.exists()){
file.mkdir();
}
for (MultipartFile multipartFile : upload) {
//獲取上傳檔案的名稱
String filename = multipartFile.getOriginalFilename();
//獲取隨機字串
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”
效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。