使用FormData实现上传多个文件


Posted in Javascript onDecember 04, 2018

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

由于项目中使用到,特此写个Demo

html代码:

<html>
<head>
 <title>Title</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" id="form_example">
 <input type="file" id="files" multiple/><br/><br/>
 <input type="submit" value="提交"/>
</form>

<div id='file-list-display'></div>
</body>
</html>

js代码:

<script type="text/javascript">
 $(document).ready(function () {
  var fileList = [];
  var fileCatcher = document.getElementById('form_example');
  var files = document.getElementById("files"), renderFileList;
  var fileListDisplay = document.getElementById('file-list-display'), sendFile;

  fileCatcher.addEventListener("submit", function (event) {
   event.preventDefault();
   //上传文件
   sendFile();
  });

  files.addEventListener("change", function (event) {
   for (var i = 0; i < files.files.length; i++) {
    fileList.push(files.files[i]);
   }
   renderFileList();
  });

  renderFileList = function () {
   fileListDisplay.innerHTML = '';
   fileList.forEach(function (file, index) {
    var fileDisplayEl = document.createElement("p");
    fileDisplayEl.innerHTML = (index + 1) + ":" + file.name;
    fileListDisplay.appendChild(fileDisplayEl);
   })
  };

  sendFile = function () {
   var formData = new FormData();
   var request = new XMLHttpRequest();
   //循环添加到formData中
   fileList.forEach(function (file) {
    formData.append('files', file, file.name);
   })
   request.open("POST", "/test/upload.do");
   request.send(formData);
  }
 })
</script>

后端使用Spring MVC接收前端文件

配置multipart解析器:

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
   p:defaultEncoding="utf-8"/>

Controller:

@RequestMapping("/upload.do")
@ResponseBody
public Object upload(@RequestParam MultipartFile[] files) {
  System.out.println(files.length);
  return "ok";
}

前端页面:

使用FormData实现上传多个文件

请求:

使用FormData实现上传多个文件

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

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
用javascript实现自定义标签
May 08 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 #Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 #Javascript
vue实现的双向数据绑定操作示例
Dec 04 #Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
vue实现的组件兄弟间通信功能示例
Dec 04 #Javascript
微信小程序模板template简单用法示例
Dec 04 #Javascript
You might like
第一个无线电台是由谁发明的
2021/03/01 无线电
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python实现大文件分割与合并
2019/07/22 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python实现超级玛丽游戏
2020/03/18 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
土建资料员岗位职责
2014/01/04 职场文书
会计岗位描述
2014/02/22 职场文书
文案策划求职信
2014/03/18 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
市场调查策划方案
2014/06/10 职场文书
教师岗位说明书
2015/09/30 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书