使用上传实现上传多个文件

本文实例为大家分享了上传上传多个文件的具体代码，供大家参考，具体内容如下

由于项目中使用到，特此写个演示

超文本标记语言代码：

html标题TItle/title脚本src=' http :3359 cdn。bootscs。com/jquery/3。3 .1/jquery。量滴js '/script/head dy form enctype=' multipart/form-data ' id=' form _ example '输入类型=' file ' id=' files ' multiple/br/input type=' submit ' value='提交//formdiv id=' file-list-display '/div/body/html js代码：

脚本类型='text/javascript' $(文档)。ready(function(){ var fileList=[]；var文件捕捉器=文档。getelementbyid(' form _ example ')；var文件=文档。getelementbyid(' files ')，renderFileListvar fileListDisplay=document。getelementbyid(' file-list-display ')，sendFilefile catcher。addeventlistener(' submit ')，函数(事件){事件。prevent default()；//上传文件sendFile()；});files.addEventListener('change '，function(event){ for(var I=0；我有档案。文件。长度；I){ filelist。推送(文件。文件[I])；} RenderfileList()；});renderFileList=function(){ filelistdisplay。innerhtml=fileList.forEach(函数（文件，索引){ var file displayel=document。创建元素(' p ')；fileDisplayEl.innerHTML=(索引1)":"文件。indexfilelistdisplay。append child(file display El)；}) };sendFile=function(){ var formData=new formData()；定义变量请求=new XMlhttprequest()；//循环添加到上传中fileList.forEach(函数（文件){ formData.append('files '，file，file。姓名)；}) request.open('POST '，'/test/upload。do’)；请求。发送(表单数据)；} })/脚本后端使用的实现接收前端文件

配置几部分的解析器：

bean id=' Multipart resolver ' class=' org。弹簧框架。网络。多部分的。公地。CommonsMultipart解析器' p :默认编码=' utf-8 '/控制器：

@请求映射('/upload。do ')@ responsebypublic Object上传(@ request param multiplefile[]文件){ system。出去。println(文件。长度)；返回"确定";}前端页面：

请求：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。