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手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 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
getimagesize获取图片尺寸实例
2014/11/15 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
对比分析json及XML
2014/11/28 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python冒泡排序算法的实现代码
2013/11/21 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
python实现扫雷小游戏
2020/04/24 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
花卉与景观设计系大学生求职信
2013/10/01 职场文书
一句话工作感言
2014/03/01 职场文书
局火灾防控工作方案
2014/05/25 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
天坛导游词
2015/02/02 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
vue实现Toast组件轻提示
2022/04/10 Vue.js