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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现动态操作table行
Nov 23 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
PHP Class SoapClient not found解决方法
2018/01/20 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
vue实现分页加载效果
2019/12/24 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python tornado上传文件的功能
2020/03/26 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
数据库面试要点基本概念
2013/10/31 面试题
房屋转让协议书范本
2014/04/11 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
班主任经验交流材料
2014/12/16 职场文书
世界文化遗产导游词
2015/02/13 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
python识别围棋定位棋盘位置
2021/07/26 Python