使用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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
js内置对象 学习笔记
Aug 01 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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
PHP正则表达式笔记与实例详解
2019/05/09 PHP
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python实现分段线性插值
2018/12/17 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python学习笔记之多进程
2020/08/06 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
教师实习自我鉴定
2013/12/14 职场文书
公司年底活动方案
2014/08/17 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2014年学生会工作总结
2014/11/07 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
教师工作证明范本
2015/06/12 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS