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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 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传输数据的代码
2007/11/13 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
开启PHP的伪静态模式
2015/12/31 PHP
JavaScript效率调优经验
2009/06/04 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
实施意见格式范本
2015/06/05 职场文书
深入理解go slice结构
2021/09/15 Golang
python全面解析接口返回数据
2022/02/12 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers