jquery+springboot Realization of File Upload Function
- 2021-12-04 09:27:25
- OfStack
This article example for everyone to share the jquery + springboot file upload function of the specific code, 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/update.html">
</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=" Empty " />
<p>
</form>
<span>----------- Single file + Parameter ->RequestParam Receive 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=" Empty " />
<p>
</form>
<span>----------- Single file + Parameter -> Object receive parameters </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=" Empty " />
<p>
</form>
<span>----------- Multi-file (parameter passing and single file) 1 To) --------------</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=" Empty " />
<p>
</form>
<span>------------ Folder ( All files under the folder )-------------</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=" Empty " />
<p>
</form>
<span>------------Ajax Pass FormData Upload a file -------------</span>
<br>
<span>------------1. Use form Form initialization FormData Upload files in object mode -------------</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()"> Single input Submit </button>
<button onclick="remove1()"> Empty 1</button>
<button onclick="remove2()"> Empty 2</button>
<p>
</form>
<span>------------2. Use FormData Upload files by adding fields to the -------------</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"/>
Multiple file submission <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()"> Single input Submit </button>
<button onclick="save2()"> Multiple file submission </button>
<button onclick="save3()"> More input Submit </button>
<button onclick="remove1()"> Empty 1</button>
<button onclick="remove2()"> Empty 2</button>
</p>
</form>
<strong> Back end MultipartFile How to accept it, look at the front end formData.append How to build </strong>
<br>
<strong>formData.append("meFile", File Object )-->MultipartFile</strong>
<br>
<strong>formData.append("meFile", More File Object )-->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(" By substitution input Realization ")
// No. 1 2 Species:
var obj = document.getElementById('ajax_formdata_file') ;
obj.outerHTML=obj.outerHTML;
}
function remove2(){
alert("clear Method ")
// No. 1 1 Species :
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>Back end
@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();
}
// Object receiving @RequestPart Transfer json String, others with @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();
}
}