使用FormData上传多个文件

旧城等待， 2022-05-25 11:20 302阅读 0赞

由于项目中使用到，特此写个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";
    }

前端页面：  
![70][]

请求：  
![70 1][]

[70]: /images/20220525/fa1bbe2c13fd433b9e9cc1c1de351334.png
[70 1]: /images/20220525/9f5eb02682624f41b74cd47ca4480a1e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，302人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax上传文件formData

优秀的程序员从不墨迹，直接上示例代码：前端代码： <!DOCTYPE html> <html> <head> <meta chars

迈不过友情╰/ 2023年09月27日 10:23/ 0 赞/ 157 阅读

相关文件上传--单个或多个文件上传

单个文件上传第一种方法： / @param file 需要上传的文件 @para

雨点打透心脏的1/2处/ 2023年09月25日 21:39/ 0 赞/ 157 阅读

相关 httpClient文件上传formdata

/ 上传文件 @param urlStr @param textMap

不念不忘少年蓝@/ 2023年03月02日 14:49/ 0 赞/ 22 阅读

相关 vantUi formdata 上传

<van-uploader :after-read="afterRead" @oversize="onOversize" /> afterRead(data:

心已赠人/ 2022年11月14日 15:59/ 0 赞/ 226 阅读

相关通过jQuery Ajax使用FormData对象上传文件

但上传文件部分只有底层的`XMLHttpRequest`对象发送上传请求，那么怎么通过`jQuery`的`Ajax`上传呢？本文将介绍通过`jQuery`使用`FormD

蔚落/ 2022年07月16日 09:40/ 0 赞/ 270 阅读

相关使用FormData上传多个文件

由于项目中使用到，特此写个Demo html代码： <html> <head> <title>Title</title>

旧城等待，/ 2022年05月25日 11:20/ 0 赞/ 303 阅读

相关 java web上传文件之formdata

在使用formdata上传文件之前，我曾尝试使用base64字符串传递文件，但经过实践检验，base64只能传递小文件，至于文件大小上限多少并不确定。鄙人查阅资料，推测base

迷南。/ 2022年04月24日 00:16/ 0 赞/ 671 阅读

相关 jQuery使用FormData上传文件

这段时间，一直练习在ASP.NET MVC程序中上传文件。静态，动态，单个或多文件上传。在网上有看到网友提及使用FormData来上传，Insus.NET觉得是一个

柔情只为你懂/ 2022年04月22日 14:50/ 0 赞/ 306 阅读

相关 ajax实现文件上传（使用FormData）

文件上传一般是同过表单来上传，但表单提交不满足所有情况，部分情况需要ajax上传文件 <input type="file" id="file"> js获取文件

系统管理员/ 2022年04月05日 05:29/ 0 赞/ 809 阅读

相关 Ajax formData上传文件 + 进度条

// require('./lib/ajax'); require('jquery'); var type=0,//0 dp 1 mt

小咪咪/ 2021年06月24日 15:58/ 0 赞/ 634 阅读