jQuery实现异步上传一个或多个文件


Posted in jQuery onAugust 17, 2020

本文实例为大家分享了jQuery实现异步上传一个或多个文件的具体代码,供大家参考,具体内容如下

首先使用SpringMvc文件上传,需要引入第三方上传文件的jar:

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.1</version>
</dependency>
<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.4</version>
</dependency>

响应json需要导入的包:

<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-databind</artifactId>
 <version>2.9.0</version>
</dependency>
<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-core</artifactId>
 <version>2.9.0</version>
</dependency>
<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-annotations</artifactId>
 <version>2.9.0</version>
</dependency>

接下来看jsp文件:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>首页</title>
 </head>
 <body>
 <p>同步上传一个文件</p>
 <form action="upload/testUpload" method="post" enctype="multipart/form-data">
 <input type="file" name="upload"><br>
 <input type="submit" value="上传">
 </form>

 <hr>
 <p>异步上传一个文件</p>
 <form id="formData" method="post" enctype="multipart/form-data">
 <input type="file" name="upload"><br>
 <input id="sub" type="button" value="上传">
 </form>

 <hr>
 <p>异步上传一个文件,且表单有其他数据</p>
 <form id="formData2" method="post" enctype="multipart/form-data">
 编 号:<input type="text" name="id"><br>
 账户名:<input type="text" name="name"><br>
 金 额:<input type="text" name="money"><br>
 <input type="file" name="upload"><br>
 <input id="sub2" type="button" value="上传">
 </form>

 <hr>
 <p>异步上传多个文件,且表单有其他数据</p>
 <form id="formData3" method="post" enctype="multipart/form-data">
 编 号:<input type="text" name="id"><br>
 账户名:<input type="text" name="name"><br>
 金 额:<input type="text" name="money"><br>
 <input type="file" name="upload" multiple="multiple"><br>
 <input id="sub3" type="button" value="上传">
 </form>

 <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
 <script>

 $(function () {
 //异步上传一个文件
 $("#sub").click(function () {
 var file = new FormData($("#formData")[0]);
 $.post({
  url:'upload/testUpload',
  contentType:false, //jQuery不要去设置Content-Type请求头
  processData:false, //jQuery不要去处理发送的数据
  cache:false, //不缓存
  dataType:'json', //返回类型json
  data:file,  //文件数据
  success:function (res) {
  console.log(res);
  }
 });
 });

 //异步上传一个文件,带表单参数
 $("#sub2").click(function () {
 //将form表单转换为FormData对象
 var data = new FormData(document.querySelector("#formData2"));
 $.post({
  url:'upload/testUpload2',
  contentType:false, //jQuery不要去设置Content-Type请求头
  processData:false, //jQuery不要去处理发送的数据
  cache:false, //不缓存
  dataType:'json', //返回类型json
  data:data,  //表单数据
  success:function (res) {
  console.log(res);
  },
  error:function (error) {
  console.log(error);
  }
 });
 });

 //异步上传多个文件,带表单参数
 $("#sub3").click(function () {
 //将form表单转换为FormData对象
 var data = new FormData(document.querySelector("#formData3"));
 $.post({
  url:'upload/testUpload3',
  contentType:false, //jQuery不要去设置Content-Type请求头
  processData:false, //jQuery不要去处理发送的数据
  cache:false, //不缓存
  dataType:'json', //返回类型json
  data:data,  //表单数据
  success:function (res) {
  console.log(res);
  },
  error:function (error) {
  console.log(error);
  }
 });
 });

 });
 </script>

 </body>
</html>

下面是controller:

@Controller
@RequestMapping("/upload")
public class FileController {

 /**
 * 同步文件一个上传和异步上传一个文件,共同使用这一个控制器方法
 * @param request
 * @param upload
 * @return
 * @throws IOException
 */
 @RequestMapping(value = "/testUpload",method = RequestMethod.POST)
 public String upload(HttpServletRequest request, MultipartFile upload) throws IOException {
 //获取文件的保存路径
 String path = request.getServletContext().getRealPath("/uploads");
 //获取上传文件的名称
 String filename = upload.getOriginalFilename();
 //获取随机字符串
 String prefix = UUID.randomUUID().toString().replaceAll("-", "");
 filename = prefix + "_" + filename;
 //创建文件对象
 File file = new File(path);
 //判断路径是否存在,不存在则创建
 if(!file.exists()){
  file.mkdir();
 }
 //上传文件
 upload.transferTo(new File(file,filename));
 return "success";
 }


 /**
 * 异步文件上传和表单数据
 * @param request
 * @param upload
 * @return
 * @throws IOException
 */
 @RequestMapping(value = "/testUpload2",method = RequestMethod.POST)
 public @ResponseBody Account upload2(HttpServletRequest request, MultipartFile upload, Account account) throws IOException {
 //获取文件的保存路径
 String path = request.getServletContext().getRealPath("/uploads");
 //获取上传文件的名称
 String filename = upload.getOriginalFilename();
 //获取随机字符串
 String prefix = UUID.randomUUID().toString().replaceAll("-", "");
 filename = prefix + "_" + filename;
 //创建文件对象
 File file = new File(path);
 //判断路径是否存在,不存在则创建
 if(!file.exists()){
  file.mkdir();
 }
 //上传文件
 upload.transferTo(new File(file,filename));
 return account;
 }


 /**
 * 异步多个文件上传和表单数据
 * @param request
 * @param upload 采用数组接收
 * @return
 * @throws IOException
 */
 @RequestMapping(value = "/testUpload3",method = RequestMethod.POST)
 public @ResponseBody Account upload3(HttpServletRequest request, MultipartFile[] upload, Account account) throws IOException {
 //获取文件的保存路径
 String path = request.getServletContext().getRealPath("/uploads");
 //创建文件对象
 File file = new File(path);
 //判断路径是否存在,不存在则创建
 if(!file.exists()){
  file.mkdir();
 }

 for (MultipartFile multipartFile : upload) {
  //获取上传文件的名称
  String filename = multipartFile.getOriginalFilename();
  //获取随机字符串
  String prefix = UUID.randomUUID().toString().replaceAll("-", "");
  filename = prefix + "_" + filename;
  //上传文件
  multipartFile.transferTo(new File(file,filename));
 }
 return account;
 }
}
public class Account implements Serializable {
 private int id;
 private String name;
 private float money;
 //getter or setter....
}

注意事项:

上传文件时,表单的 enctype 修改为:multipart/form-data;
后端使用 MultipartFile upload 对象接收,upload 必须和 <input> 的name属性一致;
上传多个文件,给 <input> 添加:multiple=“multiple”

效果:

jQuery实现异步上传一个或多个文件

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery中event.target和this的区别详解
Aug 13 #jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
jQuery实现雪花飘落效果
Aug 02 #jQuery
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
jquery轮播图插件使用方法详解
Jul 31 #jQuery
You might like
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
JSON无限折叠菜单编写实例
2013/12/16 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
angular多语言配置详解
2019/05/16 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现目录树生成示例
2014/03/28 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
代码分析Python地图坐标转换
2018/02/08 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Pycharm中如何关掉python console
2020/10/27 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
人工作失职检讨书
2015/05/05 职场文书
唐山大地震观后感
2015/06/05 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书