介绍 & lt; dependency>
& lt; groupId> commons-fileupload
& lt; artifactId> commons-fileupload
& lt; version> 1.3.1
& lt;/dependency>
& lt; dependency>
& lt; groupId> commons-io
& lt; artifactId> commons-io
& lt; version> 2.4 & lt;/version>
& lt;/dependency> & lt; dependency>
& lt; groupId> com.fasterxml.jackson.core
& lt; artifactId> jackson-databind
& lt; version> 2.9.0
& lt;/dependency>
& lt; dependency>
& lt; groupId> com.fasterxml.jackson.core
& lt; artifactId> jackson-core
& lt; version> 2.9.0
& lt;/dependency>
& lt; dependency>
& lt; groupId> com.fasterxml.jackson.core
& lt; artifactId> jackson-annotations
& lt; version> 2.9.0
& lt;/dependency> & lt; % @页面contentType=皌ext/html; charset=UTF-8"语言=癹ava"%比;
& lt; html>
& lt; head>
& lt; title>首页& lt;/title>
& lt;/head>
& lt; body>
& lt; p>同步上传一个文件& lt;/p>
action=& lt;形式“上传/testUpload"方法=皃ost"enctype=岸嗖糠?form-data"比;
& lt;输入类型=癴ile"name=皍pload"祝辞& lt; br>
& lt;输入类型=皊ubmit"值=吧洗氨?
& lt;/form>
& lt; hr>
& lt; p>异步上传一个文件& lt;/p>
& lt;形式id=癴ormData"方法=皃ost"enctype=岸嗖糠?form-data"比;
& lt;输入类型=癴ile"name=皍pload"祝辞& lt; br>
& lt;输入id=皊ub"类型=癰utton"值=吧洗氨?
& lt;/form>
& lt; hr>
& lt; p>异步上传一个文件,且表单有其他数据& lt;/p>
& lt;形式id=癴ormData2"方法=皃ost"enctype=岸嗖糠?form-data"比;
编,emsp;号:& lt;输入类型=皌ext"name=癷d"祝辞& lt; br>
账户名:& lt;输入类型=皌ext"name=皀ame"祝辞& lt; br>
金,emsp;额:& lt;输入类型=皌ext"name=癿oney"祝辞& lt; br>
& lt;输入类型=癴ile"name=皍pload"祝辞& lt; br>
& lt;输入id=皊ub2"类型=癰utton"值=吧洗氨?
& lt;/form>
& lt; hr>
& lt; p>异步上传多个文件,且表单有其他数据& lt;/p>
& lt;形式id=癴ormData3"方法=皃ost"enctype=岸嗖糠?form-data"比;
编,emsp;号:& lt;输入类型=皌ext"name=癷d"祝辞& lt; br>
账户名:& lt;输入类型=皌ext"name=皀ame"祝辞& lt; br>
金,emsp;额:& lt;输入类型=皌ext"name=癿oney"祝辞& lt; br>
& lt;输入类型=癴ile"name=皍pload"多个=癿ultiple"祝辞& lt; br>
& lt;输入id=皊ub3"类型=癰utton"值=吧洗氨?
& lt;/form>
& lt;脚本类型=拔谋?javascript"src=癹s/jquery-3.3.1.js"祝辞& lt;/script>
& lt; script>
$(函数(){//异步上传一个文件
(“# sub"美元)。点击(函数(){
var文件=new FormData ($ (“# formData") [0]);
$ . post ({
url: & # 39;上传/testUpload& # 39;
contentType://jQuery不假,要去设置内容类型请求头
processData://jQuery不假,要去处理发送的数据
缓存:假的,//不缓存
数据类型:& # 39;json # 39;//返回类型json
数据:文件,//文件数据
成功:函数(res) {
console.log (res);
}
}）;
}）;//异步上传一个文件,带表单参数
(“# sub2"美元)。点击(函数(){//将形式表单转换为FormData对象
var=new FormData数据(document.querySelector (“# formData2"));
$ . post ({
url: & # 39;上传/testUpload2& # 39;
contentType://jQuery不假,要去设置内容类型请求头
processData://jQuery不假,要去处理发送的数据
缓存:假的,//不缓存
数据类型:& # 39;json # 39;//返回类型json
数据:数据//表单数据
成功:函数(res) {
console.log (res);
}，
错误:函数(错误){
console.log(错误);
}
}）;
}）;//异步上传多个文件,带表单参数
(“# sub3"美元)。点击(函数(){//将形式表单转换为FormData对象
var=new FormData数据(document.querySelector (“# formData3"));
$ . post ({
url: & # 39;上传/testUpload3& # 39;
contentType://jQuery不假,要去设置内容类型请求头
processData://jQuery不假,要去处理发送的数据
缓存:假的,//不缓存
数据类型:& # 39;json # 39;//返回类型json
数据:数据//表单数据
成功:函数(res) {
console.log (res);
}，
错误:函数(错误){
console.log(错误);
}
}）;
}）;
}）;
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍jQuery实现异步上传一个或多个文件的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
本文实例为大家分享了jQuery实现异步上传一个或多个文件的具体代码,供大家参考,具体内容如下
首先使用SpringMvc文件上传,需要引入第三方上传文件的jar:
响应json需要导入的包:
接下来看jsp文件:
