This article has shared with you the specific code for jquery+springboot to implement file upload function for your reference. The specific content is as follows
front end
<!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/">
</head>
<body>
<span>-----------form submit--------------</span>
<br>
<span>-----------Single file--------------</span>
<form action="/metadata/metaTables/single-file" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
<p>
<input type="submit" value="submit" />
<input type="reset" value="Clear" />
<p>
</form>
<span>-----------Single file+parameter->RequestParam接收parameter</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="submit" />
<input type="reset" value="Clear" />
<p>
</form>
<span>-----------Single file+parameter->Object接收parameter</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="submit" />
<input type="reset" value="Clear" />
<p>
</form>
<span>-----------Multiple files（parameter传递和Single file一致）--------------</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="submit" />
<input type="reset" value="Clear" />
<p>
</form>
<span>------------Folders(Folders下的所有文件)-------------</span>
<form action="/metadata/metaTables/dir" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" webkitdirectory directory />
<p>
<input type="submit" value="submit" />
<input type="reset" value="Clear" />
<p>
</form>
<span>------------AjaxpassFormDataUpload file-------------</span>
<br>
<span>------------1.useformForm InitializationFormDataObject方式Upload file-------------</span>
<br>
<form >
aaa:<input name="aaa" value="1"></input>
bbb:<input name="bbb" value="2"></input>
ccc:<input name="ccc" value="3"></input>
input<input type="file" name="meFile"/>
<p>
<button onclick="save()">oneinputsubmit</button>
<button onclick="remove1()">Clear1</button>
<button onclick="remove2()">Clear2</button>
<p>
</form>
<span>------------2.useFormDataObject添加字段方式Upload file-------------</span>
<form >
aaa:<input name="aaa" value="4"></input>
bbb:<input name="bbb" value="5"></input>
ccc:<input name="ccc" value="6"></input>
input<input type="file" name="meFile"/>
Multiple filessubmit<input type="file" name="meFile" multiple="multiple"/>
input<input type="file" name="meFile"/>
<p>
<button onclick="save1()">oneinputsubmit</button>
<button onclick="save2()">Multiple filessubmit</button>
<button onclick="save3()">manyinputsubmit</button>
<button onclick="remove1()">Clear1</button>
<button onclick="remove2()">Clear2</button>
</p>
</form>
<strong>rear endMultipartFileHow to accept，Look at the front end How to build</strong>
<br>
<strong>("meFile", FileObject)-->MultipartFile</strong>
<br>
<strong>("meFile", manyFileObject)-->MultipartFile[]</strong>
<script src="../../assets/hplus/js/?v=2.1.4"></script>
<script src="../../assets/"></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();
("num", 110)
("test", (formJson))
("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();
("test", ({'aaa':111,'bbb':222,'ccc':333}))
for(var f of $('#ajax_formdata_file2')[0].files)
("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();
('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].;j++){
("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("Implemented by replacing input")
//The second type: var obj = ('ajax_formdata_file') ;
=;
}
function remove2(){
alert("clear method")
//The first type: var obj = ('ajax_formdata_file') ;
();
();
}
(function ($) {
$. = function () {
var serializeObj = {};
var array = ();
var str = ();
$(array).each(function () {
if (serializeObj[]) {
if ($.isArray(serializeObj[])) {
serializeObj[].push();
} else {
serializeObj[] = [serializeObj[], ];
}
} else {
serializeObj[] = ;
}
});
return serializeObj;
};
})(jQuery);
</script>
</body>
</html>
rear end
@RestController
@RequestMapping({ "/metadata/metaTables" })
public class MetaTablesController
{
@PostMapping("single-file")
public void singleFile(@RequestParam("meFile")MultipartFile multipartFile){
();
}
@PostMapping("single-file-param")
public void singleFile(@RequestParam("meFile")MultipartFile multipartFile,@RequestParam("name")String name){
();
}
@PostMapping("single-file-object")
public void singleFile(@RequestParam("meFile") MultipartFile multipartFile, Test test){
();
}
@PostMapping("many-file")
public void manyFile(@RequestParam("meFile")MultipartFile[] multipartFile){
();
}
@PostMapping("dir")
public void dir(@RequestParam("meFile")MultipartFile[] multipartFile){
();
}
@PostMapping("ajax-formdata")
public void ajaxFormData(@RequestParam("meFile")MultipartFile multipartFile, Test test){
();
}
//Object receiving uses @RequestPart to pass json string, others use @RequestParam @PostMapping("ajax-formdata1")
public void ajaxFormData1(@RequestParam("meFile")MultipartFile multipartFile, @RequestPart("test") Test test, @RequestParam("num")int num){
();
}
@PostMapping("ajax-formdata2")
public void ajaxFormData2(@RequestParam("meFile")MultipartFile[] multipartFile,@RequestPart("test") Test test){
();
}
@PostMapping("ajax-formdata3")
public void ajaxFormData3(@RequestParam("meFile")MultipartFile[] multipartFile, @RequestParam("num")int num){
();
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.