jquery+springboot實現檔案上傳功能
阿新 • • 發佈：2021-11-05
本文例項為大家分享了+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//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',success: function (data) {
alert("success")
http://www.cppcns.com
後端
@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")
www.cppcns.com 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();
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。