AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)

上一篇文章//www . JB 51 . net/article/124489 . htm介绍了ajaxfileupload实现多文件上传。

但它只是固定数量的文件。如果需求对文件数量不确定，我们需要动态添加一个文件上传框来实现灵活性。

基于上一篇文章的基本框架没有改变，主要修改了以下几个方面

1.jQuery实现动态添加和删除文件上传框

2.获取文件上传框的标识

3.在ajaxfileupload.js中将ID数组转换为所需的Object数组

依次解决以上问题

首先，实现文件上传框的动态添加和删除

正文表单操作=' enctype=' multipart/form-data ' H2多文件上载/H2 input type=' file ' id=' file 1 ' name=' file '/a id=' add ' href=' JavaScript 3360 void()；'rel=' external no follow ' onclick=' addFile()；'add/a span table id=' down '/table/span/br input type=' button ' onclick=' file upload()；'value=' upload '/form/body script type=' text/JavaScript '/add attachment function addfile(){ var file length=$(' input[name=file]'). length 1；var inputFile=' div id=' addFile ' file length ' '输入类型=' file ' id=' file ' file ' file length ' ' name=' file '/a href=' JavaScript : void()；onclick=' Delfile(' FileLength ')；删除/a/div '；$('#add ')。在(inputFile)之后；}//删除附件function delfile(id){ $(“# addfile”id)。移除()；}/脚本二。获取文件上传框的标识

因为我们不知道有多少个上传框，所以每次我们添加一个上传框，它的id属性都会增加文件1和文件2

您可以使用每个循环来拼接字符

var文件=' '；//获取ID属性值$ ('input [name=file]')。每个(函数(){files=files $ (this))。attr ('id ')'，'；})//截断字符files=files.substring (0，files.length-1)的最后一个逗号(，)；然后我们得到文件值如：var files=' file1，file2，file 3 '；

您可以使用console.info(文件类型)；检查文件是否为字符串类型

第三，在ajaxfileupload.js中将ID数组转换为所需的Object数组

因为我们需要的是比如varfiles=['file1 '，' file2 '，' file 3 ']；

而不是var文件='file1，file2，file 3 '；

因此，需要转换，但不一定要在ajaxfileupload.js中操作

当你得到ID后，你可以在转换后转移这个值。不管在哪里，方法都一样。

或者找到以下代码：

var oldElement=jQuery(' # ' filelementid)；var new element=jQuery(oldElement)。clone()；jQuery(oldElement)。attr('id '，FileID)；jQuery(oldElement)。在(newElement)之前；jQuery(oldElement)。appendTo(表单)；在此代码上添加以下内容：

var t=If(类型为(file element id)=' string '){/* *将传递的值，如：' file1，file2，file3 '转换为：['file1 '，' file2 '，' file 3 ']*/var s=file element id . split('，')；for(s中的var I){ t=t ' ' ' s[I]' ' ' '，'；} t='[' t ']'；t=t.replace('，]'，']')} FileElementID=eval('(' t ')')；//将字符串类型转换为Object类型的效果如图：

除了上面的代码，比如struts配置，Action不需要修改

项目源代码下载：http://demo.jb51.net/js/2017/struts_ajaxfileupload2.rar

摘要

以上是AjaxFileUpload结合边肖推出的Struts2实现多文件上传(动态添加文件上传框)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！