使用FormData实现上传多个文件

作者：半笙彷徨时间：2024-05-11 09:30:20　

本文实例为大家分享了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";
}

前端页面：

请求：

来源：https://blog.csdn.net/wang704987562/article/details/80304471

标签：FormData,上传

投稿

使用FormData实现上传多个文件

猜你喜欢

Python脚本传参数argparse模块的使用

mysql中如何查询数据库中的表名

python中bs4.BeautifulSoup的基本用法

django model通过字典更新数据实例

用ASP显示ACCESS数据库的的GIF图象

ASP同一站点不同编码程序出现乱码解决办法

在Python中执行cmd

Pandas 筛选和删除目标值所在的行的实现

使用Pycharm(Python工具)新建项目及创建Python文件的教程

jupyter notebook参数化运行python方式

SQL Server2019安装后出现连接失败的解决方法

python自动化之Ansible的安装教程

python实现某考试系统生成word试卷

JavaScript 数组的 uniq 方法

简单的ASP生成HTML并分页程序

python socket 聊天室实例代码详解

tensorflow安装成功import tensorflow 出现问题

Python超详细讲解内存管理机制

几个ASP字符串处理函数

Go语言map字典用法实例分析