jquery+springboot实现文件上传功能
程序员文章站
2022-03-16 21:33:53
本文实例为大家分享了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();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Ogre overlay实现帧动画
下一篇： 实训篇:第十五天