jQuery實現(xiàn)異步上傳一個或多個文件
更新時間：2020年08月17日 11:21:39 作者：Linging_24
這篇文章主要為大家詳細(xì)介紹了jQuery異步上傳一個或多個文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(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">
編 號:<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>異步上傳多個文件,且表單有其他數(shù)據(jù)</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不要去設(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();
//獲取隨機字符串
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();
//獲取隨機字符串
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();
//獲取隨機字符串
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”
效果：
更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Jquery插件之多圖片異步上傳
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- 使用jquery.upload.js實現(xiàn)異步上傳示例代碼
- jquery實現(xiàn)兼容IE8的異步上傳文件
- jQuery實現(xiàn)jQuery-form.js實現(xiàn)異步上傳文件
- jQuery插件ajaxFileUpload異步上傳文件
- jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
- jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
- asp.net+jquery.form實現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
- jquery uploadify和apache Fileupload實現(xiàn)異步上傳文件示例
相關(guān)文章
jquery地址欄鏈接與a標(biāo)簽鏈接匹配之特效代碼總結(jié)
jquery如何獲取地址欄參數(shù)，改變地址欄樣式，接下來，通過本篇文章給大家分享jquery地址欄鏈接與a標(biāo)簽鏈接匹配之特效代碼總結(jié)，需要的朋友可以參考下2015-08-08
jQuery 獲取select選中值及清除選中狀態(tài)
這篇文章主要介紹了jQuery 獲取select選中值及清除選中狀態(tài)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
本文是對jquery 刪除cookie失效的解決方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jquery如何撲捉回車鍵觸發(fā)的事件,需要的朋友可以參考下2014-04-04
基于jQuery實現(xiàn)多標(biāo)簽頁切換的效果(web前端開發(fā))
這篇文章主要介紹了基于jQuery實現(xiàn)多標(biāo)簽頁切換的效果(web前端開發(fā))的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要給大家介紹了利用jQuery實現(xiàn)一個簡單的表格上下翻頁效果的相關(guān)資料，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
jquery彈層類代碼分享，大家參考使用吧2013-12-12
這篇文章主要介紹了jQuery無刷新分頁實現(xiàn)方法,以完整實例形式分析了jQuery實現(xiàn)分頁的數(shù)值計算與元素操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
在本篇文章里小編給大家整理的是一篇關(guān)于jQuery沖突問題解決方法，有興趣的朋友們可以學(xué)習(xí)下。2021-01-01
jQuery判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部的實現(xiàn)方法
最近做項目遇到這樣的需求，要求基于jq判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部了，下面小編給大家分享實例代碼，需要的朋友參考下吧2017-10-10