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上傳操作匯總》進行學(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實現(xiàn)可拖動進度條實例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06
load可以做到加載一個頁面的時候，如果發(fā)生錯誤，根據(jù)statusText給出的狀態(tài)，顯示對應(yīng)的提示，這對用戶來說非常重要2014-10-10
jQuery實現(xiàn)獲取動態(tài)添加的標(biāo)簽對象示例
這篇文章主要介紹了jQuery實現(xiàn)獲取動態(tài)添加的標(biāo)簽對象,涉及jQuery針對頁面元素的動態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
jquery使用slideDown實現(xiàn)模塊緩慢拉出效果的方法
這篇文章主要介紹了jquery使用slideDown實現(xiàn)模塊緩慢拉出效果的方法,涉及slideDown方法操作模塊展示效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章分享一款基于jQuery圖片預(yù)加載ydxLazyLoad.js代碼。這是一款基于ydxLazyLoad.js插件實現(xiàn)的圖片延遲加載特效，感興趣的小伙伴們可以參考一下2015-11-11
jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單完整實例
這篇文章主要介紹了jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單代碼,可實現(xiàn)jQuery基于鼠標(biāo)事件動態(tài)操作頁面元素變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了擴展datagrid的一個方法keyCtr實現(xiàn)鍵盤上下控制選中行,需要的朋友可以參考下2014-03-03
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)前端知識有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-04-04
基于Jquery的動態(tài)添加控件并取值的實現(xiàn)代碼
基于Jquery的動態(tài)添加控件并取值的實現(xiàn)代碼，需要的朋友可以參考下。2010-09-09
jQuery是繼prototype之后的又一個優(yōu)秀的Javascript框架。它是由 John Resig 于 2006 年初創(chuàng)建的，它有助于簡化 JavaScript™ 以及Ajax 編程。2009-05-05