使用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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
深入研究React中setState源码
Nov 17 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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+Ajax实现表单验证的详解
2013/06/25 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
解决Python中回文数和质数的问题
2019/11/24 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
学生个人求职自荐信格式
2013/09/23 职场文书
护理专业自荐信范文
2014/02/26 职场文书
五四青年节的活动方案
2014/08/20 职场文书
活动总结新闻稿
2014/08/30 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
法院答辩状格式
2015/05/22 职场文书
运动会通讯稿100字
2015/07/20 职场文书