CSDN首页
博客
课程
文库·商城
问答
社区
插件
认证
开源
ajax上传多个file文件
搜索
会员中心
足迹
动态
消息
创作
ajax多个files,jQuery实现异步上传一个或多个文件
隔壁王医生
于 2021-08-05 17:08:43 发布
170
收藏
文章标签: ajax多个files
本文实例为大家分享了jQuery实现异步上传一个或多个文件的具体代码,供大家参考,具体内容如下
首先使用SpringMvc文件上传,需要引入第三方上传文件的jar:
commons-fileupload
commons-fileupload
1.3.1
commons-io
commons-io
2.4
响应json需要导入的包:
com.fasterxml.jackson.core
jackson-databind
2.9.0
com.fasterxml.jackson.core
jackson-core
2.9.0
com.fasterxml.jackson.core
jackson-annotations
2.9.0
接下来看jsp文件:
首页
同步上传一个文件
异步上传一个文件
异步上传一个文件,且表单有其他数据
编 号:
账户名:
金 额:
异步上传多个文件,且表单有其他数据
编 号:
账户名:
金 额:
$(function () {undefined
//异步上传一个文件
$(“#sub”).click(function () {undefined
var file = new FormData($(“#formData”)[0]);
$.post({undefined
url:‘upload/testUpload’,
contentType:false, //jQuery不要去设置Content-Type请求头
processData:false, //jQuery不要去处理发送的数据
cache:false, //不缓存
dataType:‘json’, //返回类型json
data:file, //文件数据
success:function (res) {undefined
console.log(res);
}
});
});
//异步上传一个文件,带表单参数
$(“#sub2”).click(function () {undefined
//将form表单转换为FormData对象
var data = new FormData(document.querySelector(“#formData2”));
$.post({undefined
url:‘upload/testUpload2’,
contentType:false, //jQuery不要去设置Content-Type请求头
processData:false, //jQuery不要去处理发送的数据
cache:false, //不缓存
dataType:‘json’, //返回类型json
data:data, //表单数据
success:function (res) {undefined
console.log(res);
},
error:function (error) {undefined
console.log(error);
}
});
});
//异步上传多个文件,带表单参数
$(“#sub3”).click(function () {undefined
//将form表单转换为FormData对象
var data = new FormData(document.querySelector(“#formData3”));
$.post({undefined
url:‘upload/testUpload3’,
contentType:false, //jQuery不要去设置Content-Type请求头
process