前端
<!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({ "/aaa/bbb" })
public class CccController
{
@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();
}
}
参考：
MultipartFile实现单文件和多文件上传并带参数_KeithPro的博客-优快云博客_springboot多文件上传带其他参数什么是MultipartFileMultipartFile是spring类型，代表HTML中form data方式上传的文件，包含二进制数据+文件名称。【来自百度知道】方法总结byte[]getBytes()以字节数组的形式返回文件的内容。StringgetContentType返回文件的...
https://blog.youkuaiyun.com/a1191835397/article/details/90951345robotframework调用上传文件接口报错“the request was rejected because no multipart boundary was found”_sun_977759的博客-优快云博客设置的headers信息发起请求后服务器端报错寻找到原因是因为content-type里面没有添加boundary信息，重新修改headers参数重新请求接口，不报上面的错误了，但是又报出了另外的错误出现了空指针异常的错误，咨询了开发应该是没有获取到文件信息，不太清楚具体错误的原因在网上看到篇博客里面说不要在headers里面加自己的content-t...https://blog.youkuaiyun.com/sun_977759/article/details/88868509ajax提交formdata，报错Uncaught TypeError: Illegal invocation(…)_代码编程_积微成著在使用ajax提交formdata时，报了一个错：“Uncaught TypeError: Illegal invocation(…)”，之前一直都是直接利用jquery，使用$.submit()这种方式，也没太在意一些细节，这次使用FormData()方式来模拟form表单提交，直接凉凉。。。
https://www.jiweichengzhu.com/article/ff8f4680e9b54e9f9f197d41e6504762
form表单提交的几种方式 - xiao_lin - 博客园表单提交方式一：直接利用form表单提交(主线程提交) html页面代码： 1.提交普通内容: 1 <body> 2 <form action="http://localhhttps://www.cnblogs.com/xiao-lin-unit/p/13559617.html权威分析@RequestParam和@RequestPart 的区别（官方文档）_向小凯同学学习-优快云博客一、今天写了两个文件上传的接口用到了@RequestParam和@RequestPart @RequestPart /** * 单文件上传 * @param file * @param bucket * @return */ @RequestMapping("uploadFile") public JsonResul...https://blog.youkuaiyun.com/wd2014610/article/details/79727061
其他：
将input file的选择的文件清空的两种解决方案
https://www.jb51.net/article/42271.htmhttps://www.jb51.net/article/42271.htm
扫一扫
4623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
