使用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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
React路由管理之React Router总结
May 10 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
深入学习JavaScript中的bom
May 27 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python入门教程之识别验证码
2017/03/04 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
内乡县衙导游词
2015/02/05 职场文书
目标责任书格式范文
2015/05/11 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
SQL之各种join小结详细讲解
2021/08/04 MySQL
MySQL深分页问题解决思路
2022/12/24 MySQL