js使用上传实现批量上传

时间：2021-08-29 来源：互联网编辑：宝哥软件园浏览：196次

最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。

这里先介绍下上传对象，以下内容摘自地址

XMLHttpRequest级添加了一个新的接口表单数据.利用上传对象，我们可以通过Java脚本语言用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的发送()方法来异步的提交这个'表单。比起普通的ajax，使用上传的最大优点就是我们可以异步上传一个二进制文件。

在我的自定义投入文件上传样式里就已经实现里单文件上传，并且实现了自定义投入样式；如果构造上传对象是传入表单射流研究…对象，表单数据会自动注入表单里的值；如果是新的一个空对象，然后手动附加的表单类型为文件时要注意：这里附加进去的是文件对象，而不是文件列表对象

先看一下大概效果：

控制器有两种方法：三种方式调的都是用一个接口

/** * 批量上传*/@ post mapping(' upload ')public resultmodelisattachmentvo upload(httpersvletrequest请求，@ request param(' applyId ')String applyId){ list multiplotfilelist=((multiplohtpersvletrequest)请求)。getFiles('附件');系统。出去。println(multipperfilelist。size())；系统。出去。println(applyId)；返回null} /** *批量上传2 (推荐使用)*/@ post mapping('上传2 ')public resultmodelisattachmentvo上传2(多部分文件[]附件、@ request param(' applyId ')String applyId){ system。出去。println(附件。长度)；系统。出去。println(applyId)；返回null}方式一

点击添加，追加一个输入，点击删除，删除一个输入，点击叉号也可以删除对应的输入，需要单独为每个投入选择文件

效果

超文本标记语言

表单id=' attachments ' enctype=' multipart/form-data ' class=' form-horizontal nice-validate n-yellow ' novalidate=' novalidate ' div class=' form-body ' div class=' form-group ' label class=' control-label col-MD-1 '附件管理：/label div class=' col-MD-4 ' button id=' attachmentAddBtn ' type=' button ' class=' BTN BTN-默认' add attachmentDeleteBtn/button id=' attachmentDeleteBtn ' type=' button ' attachmentUploadBtn ' type=' button ' class=' BTN BTN-默认'上传/button/div/div class='表单-组'标签class='控件-标签col-MD-1 '附件上传：/label div id=' attachmentInputs ' class=' col-MD-3 '/div/div/div/formjs

//附件-删除$('#attachmentInputs ').打开('点击','。'附件-移除'，函数（偶数){ $(这个).prev().移除();//删除上一个兄弟节点$(这个)。移除();//删除自己});//添加但是$(' # attachmentadbtn ').点击（函数（偶数){//名称值一样就可以$('#attachmentInputs ').追加('输入名称=\ '附件'类型=\ '文件'类=\ '表单-控件输入-附件\'/i类=\ ' fa倍附件-删除\ '/I ')；});//删除$('#attachmentDeleteBtn ').click(function(even){ var files=$(' # attachmentInputs input[type=' file ']')；files .每个(函数（索引，元素){ //从最下面开始删除，至少保留一个if(！(索引===0)索引===(文件。length-1)){ $(元素).下一个()。移除();$(元素)。移除();} });});//上传$('#attachmentUploadBtn ').点击（函数（偶数){ //1 ,)通过超文本标记语言表单创建上传对象自动注入//var formData=new formData($(" # attachments ")[0])；//2、从零开始创建上传对象手动注入var formData=new formData()；//注入name=file var files=$(' # attachmentInputs input[type=' file ']')；for(var I=0；我。文件。长度；i ) { //注意：这里附加进去的是文件对象，而不是文件列表对象formData.append('附件，文件[i].文件[0]);} //注入name=text formdata。追加(' applyId '，' 123456 ')；console.log(formData.getAll('附件'));//执行上传$.Ajax({ URL : CTX '/附件/上传2 '，类型： '发布'，数据：表单数据，进程数据：假，内容类型：假，成功：函数(数据){ }，错误：函数(e){ })；});//添加一个输入$(' # attachmentadbtn ').单击();方式2

第二种方式只有一个输入，用的是多重='多重'属性，可以再弹窗里选择多个文件提交，如果再加工一下，也做成第三种一样，展示出文件名，同时可以删除对应的文件

效果

超文本标记语言

表单id=' attachments 2 ' enctype=' multipart/form-data ' class=' form-horizontal ' novalidate=' novalidate ' div class=' form-body ' div class=' form-group ' label class=' control-label col-MD-1 '附件管理：/label div class=' col-MD-4 ' button id=' attachmentuploadbtn 2 ' type=' button ' class=' BTN BTN-默认' upload/button/div/div class=' form-group ' label class=' control-label col-MD-1 '附件上传：/label div id=' attachmentinputs 2 ' class=' col-MD-3 '输入名称='附件'类型='file' class='form-control输入-附件' multiple=' multiple '/div/div/formjs

//上传2 $(' # attachmentuploadbtn 2 ').点击（函数（偶数){ //1 ,)通过超文本标记语言表单创建上传对象自动注入//var formData=new formData($(“# attachments 2”)[0])；//2、从零开始创建上传对象手动注入var formData=new formData()；//注入name=file var files=$(' # attachmentinputs 2 input[type=' file ']')；for(var I=0；我文件[0].文件。长度；i ) { formData.append('附件，文件[0]。文件[I])；} //注入name=text formdata。追加(' applyId '，' 123456 ')；console.log(formData.getAll('附件'));//执行上传$.Ajax({ URL : CTX '/附件/上传2 '，类型： '发布'，数据：表单数据，进程数据：假，内容类型：假，成功：函数(数据){ }，错误：函数(e){ })；});方式3

定义了一个隐藏的输入，并将选择文件按钮的点击与投入的点击对等，点击按钮相当于点击输入，弹出选择文件对话框，监听了投入的变化事件，将选择的文件对象推到全局数组变量附件列表中，点击上传时再遍历注入到上传中

效果

超文本标记语言

表单id='附件3 ' enctype=' multipart/form-data ' class=' form-horizontal ' novalidate=' novalidate ' div class=' form-body ' div class=' form-group ' label class=' control-label col-MD-1 '附件管理：/label div class='col-md-4 '按钮id=' selectFile ' type=' button ' class=' BTN BTN-默认'选择文件/按钮按钮id=' attachmentuploadbtn 3 ' type=' button ' class=' BTN BTN-默认'上传/按钮/div/div类=' form-group ' label class=' control-label col-MD-1 '附件上传：/label input id=' attachmentinputs 3 ' type=' file ' style=' display : none；' /div id=' attachmenttext 3 ' class=' col-MD-3 '/div/div/div/formjs

//存放文件对象var attachmentArray=[]；//附件-删除$('#attachmentText3 ').打开('点击','。"附件-移除",功能（偶数){ //删除附件列表数据attachmentArray.splice($(this).数据('索引'),1);//删除超文本标记语言对象$(这个)。prev().prev().移除();$(这个)。prev().移除();$(这个)。移除();});//选择文件$('#selectFile ').点击（函数（偶数){ //获取输入$('#attachmentInputs3 ').单击();});//输入更改$('#attachmentInputs3 ').变化（函数（偶数){ //获取输入var fileName=$(这个)。val()；定义变量文件=$(此)[0].文件[0];//是否选择了文件if(fileName){ attachmentarray。推送(文件)；$('#attachmentText3 ').追加('(divp class=' attachment-text-p ' ' FIlename '/pi data-index=' '(attachmentarray。length-1)' ' ' class=\ ' fa fa-times attachment-remove \ '/I/div ')})；//上传3 $(' # attachmentuploadbtn 3 ').点击（函数（偶数){ //这里只能手动注入var formData=new formData()；//遍历数据，手动注入(var I=0；附件长度；i ) { formData.append('attachment '，attachmentArray[I])；} formData.append('applyId '，' 123456 ')；console.log(formData.getAll('附件'));//执行上传$.Ajax({ URL : CTX '/附件/上传'，type: 'post '，data: formData，processData: false，contentType: false，success:函数(数据){ }，error :函数(e){ })；});最后看一下文件数据、请求头、还有振奋人心的后台成功接参图

文件数据