jquery+springboot实现文件上传功能_jquery
这篇文章主要为大家详细介绍了jquery+springboot文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码，供大家参考，具体内容如下
前端
<!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>———–单文件+参数->RequestParam接收参数</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>———–单文件+参数->对象接收参数</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>———–多文件（参数传递和单文件一致）————–</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 怎么构建</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实现\”)
//第二种：
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();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
