jquery+springboot實現(xiàn)文件上傳功能
更新時間：2021年11月04日 08:44:46 作者：code_____monkey
這篇文章主要為大家詳細介紹了jquery+springboot文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery+springboot實現(xiàn)文件上傳功能的具體代碼，供大家參考，具體內(nèi)容如下
前端
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="max-age=21600" />
<meta http-equiv="Expires" content="Mon, 18 Aug 2014 23:00:00 GMT" />
<meta name="keywords" content="">
<meta name="description" content="table/update.html">
</head>
<body>
<span>-----------form submit--------------</span>
<br>
<span>-----------單文件--------------</span>
<form action="/metadata/metaTables/single-file" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>-----------單文件+參數(shù)->RequestParam接收參數(shù)</span>--------------</span>
<form action="/metadata/metaTables/single-file-param" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
name：<input name="name"></input>
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>-----------單文件+參數(shù)->對象接收參數(shù)</span>--------------</span>
<form action="/metadata/metaTables/single-file-object" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
aaa:<input name="aaa"></input>
bbb:<input name="bbb"></input>
ccc:<input name="ccc"></input>
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>-----------多文件（參數(shù)傳遞和單文件一致）--------------</span>
<form action="/metadata/metaTables/many-file" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" multiple="multiple" />
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>------------文件夾(文件夾下的所有文件)-------------</span>
<form action="/metadata/metaTables/dir" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" webkitdirectory directory />
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>------------Ajax通過FormData上傳文件-------------</span>
<br>
<span>------------1.使用form表單初始化FormData對象方式上傳文件-------------</span>
<br>
<form id="ajax_formdata">
aaa:<input name="aaa" value="1"></input>
bbb:<input name="bbb" value="2"></input>
ccc:<input name="ccc" value="3"></input>
input<input id="ajax_formdata_file" type="file" name="meFile"/>
<p>
<button onclick="save()">單input提交</button>
<button onclick="remove1()">清空1</button>
<button onclick="remove2()">清空2</button>
<p>
</form>
<span>------------2.使用FormData對象添加字段方式上傳文件-------------</span>
<form id="ajax_formdata1">
aaa:<input name="aaa" value="4"></input>
bbb:<input name="bbb" value="5"></input>
ccc:<input name="ccc" value="6"></input>
input<input id="ajax_formdata_file1" type="file" name="meFile"/>
多文件提交<input id="ajax_formdata_file2" type="file" name="meFile" multiple="multiple"/>
input<input id="ajax_formdata_file3" type="file" name="meFile"/>
<p>
<button onclick="save1()">單input提交</button>
<button onclick="save2()">多文件提交</button>
<button onclick="save3()">多input提交</button>
<button onclick="remove1()">清空1</button>
<button onclick="remove2()">清空2</button>
</p>
</form>
<strong>后端MultipartFile怎么接受，看前端formData.append 怎么構(gòu)建</strong>
<br>
<strong>formData.append("meFile", File對象)-->MultipartFile</strong>
<br>
<strong>formData.append("meFile", 多File對象)-->MultipartFile[]</strong>
<script src="../../assets/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="../../assets/jquery.form.js"></script>
<script>
function save(){
var formData = new FormData($('#ajax_formdata')[0]);
$.ajax({
url: '/metadata/metaTables/ajax-formdata',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function save1(){
var formData = new FormData();
var formJson = $('#ajax_formdata1').serializeJson();
formData.append("num", 110)
formData.append("test", JSON.stringify(formJson))
formData.append("meFile", $('#ajax_formdata_file1')[0].files[0]);
$.ajax({
url: '/metadata/metaTables/ajax-formdata1',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function save2(){
var formData = new FormData();
formData.append("test", JSON.stringify({'aaa':111,'bbb':222,'ccc':333}))
for(var f of $('#ajax_formdata_file2')[0].files)
formData.append("meFile", f);
$.ajax({
url: '/metadata/metaTables/ajax-formdata2',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function save3(){
debugger
var formData = new FormData();
formData.append('num',123456)
for(let i=0;i<$('#ajax_formdata1 input[type="file"]').length;i++){
for(let j=0;j<$('#ajax_formdata1 input[type="file"]')[i].files.length;j++){
formData.append("meFile", $('#ajax_formdata1 input[type="file"]')[i].files[j]);
}
}
$.ajax({
url: '/metadata/metaTables/ajax-formdata3',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function remove1(){
alert("通過替換input實現(xiàn)")
//第二種：
var obj = document.getElementById('ajax_formdata_file') ;
obj.outerHTML=obj.outerHTML;
}
function remove2(){
alert("clear方法")
//第一種:
var obj = document.getElementById('ajax_formdata_file') ;
obj.select();
document.selection.clear();
}
(function ($) {
$.fn.serializeJson = function () {
var serializeObj = {};
var array = this.serializeArray();
var str = this.serialize();
$(array).each(function () {
if (serializeObj[this.name]) {
if ($.isArray(serializeObj[this.name])) {
serializeObj[this.name].push(this.value);
} else {
serializeObj[this.name] = [serializeObj[this.name], this.value];
}
} else {
serializeObj[this.name] = this.value;
}
});
return serializeObj;
};
})(jQuery);
</script>
</body>
</html>
后端
@RestController
@RequestMapping({ "/metadata/metaTables" })
public class MetaTablesController
{
@PostMapping("single-file")
public void singleFile(@RequestParam("meFile")MultipartFile multipartFile){
System.out.println();
}
@PostMapping("single-file-param")
public void singleFile(@RequestParam("meFile")MultipartFile multipartFile,@RequestParam("name")String name){
System.out.println();
}
@PostMapping("single-file-object")
public void singleFile(@RequestParam("meFile") MultipartFile multipartFile, Test test){
System.out.println();
}
@PostMapping("many-file")
public void manyFile(@RequestParam("meFile")MultipartFile[] multipartFile){
System.out.println();
}
@PostMapping("dir")
public void dir(@RequestParam("meFile")MultipartFile[] multipartFile){
System.out.println();
}
@PostMapping("ajax-formdata")
public void ajaxFormData(@RequestParam("meFile")MultipartFile multipartFile, Test test){
System.out.println();
}
//對象接收用@RequestPart 傳遞json字符串，其他用 @RequestParam
@PostMapping("ajax-formdata1")
public void ajaxFormData1(@RequestParam("meFile")MultipartFile multipartFile, @RequestPart("test") Test test, @RequestParam("num")int num){
System.out.println();
}
@PostMapping("ajax-formdata2")
public void ajaxFormData2(@RequestParam("meFile")MultipartFile[] multipartFile,@RequestPart("test") Test test){
System.out.println();
}
@PostMapping("ajax-formdata3")
public void ajaxFormData3(@RequestParam("meFile")MultipartFile[] multipartFile, @RequestParam("num")int num){
System.out.println();
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于jquery實現(xiàn)發(fā)送文章到手機的代碼
這篇文章主要介紹了基于jquery實現(xiàn)發(fā)送文章到手機的代碼,非常簡單實用，需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了jquery制作圖片時鐘特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
jquery實現(xiàn)初次打開有動畫效果的網(wǎng)頁TAB切換代碼
這篇文章主要介紹了jquery實現(xiàn)初次打開有動畫效果的網(wǎng)頁TAB切換代碼,涉及jquery通過鼠標click事件控制頁面元素屬性的動態(tài)變換實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
jQuery在遵循W3C規(guī)范的情況下，對事件的常用屬性進行了封裝，使得事件處理在各大瀏覽器下都可以正常的運行而不需要進行瀏覽器類型判斷2013-12-12
在博客園發(fā)布了柱狀圖JQUBar1.0 jQuery 插件?，F(xiàn)將該插件升級為1.1版本。2010-11-11
基于jquery完美拖拽，可返回拖動軌跡 用JQ實現(xiàn)，話不多說，直接上碼2012-03-03
鋒利的jQuery 要點歸納（三） jQuery中的事件和動畫（下：動畫篇）
《鋒利的jQuery》要點歸納（三） jQuery中的事件和動畫（下：動畫篇）2010-03-03
這篇文章介紹了jQuery操作屬性值的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這幾天在學(xué)習jQuery插件的寫法，搜索了一些資料，包括jQuery官方的示例，但發(fā)現(xiàn)描述的并不是很清晰。最后，終于搜索到一篇講解比較清晰的文章，這里自己總結(jié)了一下，并以一個具體的示例來說明jQuery插件的寫法2013-06-06
jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因為加載會比較慢,接下來詳細介紹使用方法，感興趣的朋友可以了解下2013-01-01