上一篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传，

但仅仅是固定的文件个数，假设需求不确定是多少文件 则我们就须要动态的加入文件上传框。以实现灵活性。

基于上篇基本框架是不变的，主要改动下面几个方面

1、jQuery实现动态加入删除文件上传框

2、获取文件上传框的ID

3、ajaxfileupload.js里将ID数组转换为须要的Object数组

依次解决上面问题

一、实现动态加入删除文件上传框

<body>

	<form action="" enctype="multipart/form-data">

		<h2>

			多文件上传

		</h2>

		<input type="file" id="file1" name="file" /><a id="add" href="javascript:void();" onclick="addFile();">加入</a>

		<span>

			<table id="down">

			</table>

		</span>

		</br>

		<input type="button" onclick="fileUpload();" value="上传">

	</form>

</body>
<script type="text/javascript">

	//加入附件

	function addFile(){

		var fileLength = $("input[name=file]").length+1;

		var inputFile = "<div id='addFile"+fileLength+"'><input type='file' id='file"+fileLength+"' name='file' />"

					+"<a href='javascript:void();' onclick='delFile("+fileLength+");'>删除</a></div>";

		$("#add").after(inputFile);

	}

	//删除附件

	function delFile(id){

		$("#addFile"+id).remove();

	}

</script>

二、获取文件上传框的ID

由于我们不知道有多少个上传框,每次加入一个上传框,其id属性都是以file1,file2方式递增的

能够用each循环拼接字符

var files = "";

//获取全部 <input type="file" id="file1" name="file" /> 的ID属性值

$("input[name=file]").each(function(){

	files = files + $(this).attr("id")+",";

})

//将字符最后一逗号(,)截取掉

files = files.substring(0,files.length-1);

然后我们获取的files值 如：var files = "file1,file2,file3";

能够使用console.info(typeof(files));查看files为string类型

三、ajaxfileupload.js里将ID数组转换为须要的Object数组

由于我们须要的是诸如var files = ['file1','file2','file3'];

而不是var files = "file1,file2,file3";

所以须要进行转换。事实上也未必非得在ajaxfileupload.js里进行操作

全然能够在获取ID时转换好 再传值过来。也无所谓在哪里了，方法都一样。

还是找到下面代码：

var oldElement = jQuery('#' + fileElementId);

var newElement = jQuery(oldElement).clone();

jQuery(oldElement).attr('id', fileId);

jQuery(oldElement).before(newElement);

jQuery(oldElement).appendTo(form);

在这段代码之上加入例如以下： 

var t = '';

if(typeof(fileElementId) == 'string'){

/*

 * 将传过来的值 如："file1,file2,file3" 转换为：['file1','file2','file3']

 */

var s = fileElementId.split(",");

for(var i in s){

	t = t +  "'"+s[i]+"'"+",";

}

t = "["+t+"]";

t = t.replace(",]", "]")

}

fileElementId= eval('('+ t +')'); //将string类型转换为Object类型

效果如图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

除了以上代码其它如struts配置,Action无需改动

项目源代码下载：http://download.csdn.net/detail/itmyhome/7589939

转载请注明出处：http://blog.csdn.net/itmyhome1990/article/details/36433621

版权声明：本文博客原创文章，博客，未经同意，不得转载。

ajaxFileUpload+struts2多文件上传(动态添加文件上传框)的更多相关文章

  1. ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

    上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...

  2. winform展示Unity3D文件（支持动态改变文件路径）

    winform下展示Unity3D文件可以支持对Unity3D实现的模块进行包装,以及在其他的项目中需要展示Unity3D的界面时候,恰到适宜地进行打开展示,这里我展示如何使用winform打开Uni ...

  3. 使用JS实现页面中动态添加文件上传输入项

    1. 编写JSP <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

  4. 在jsp页面动态添加，删除文本框模块

    jsp代码============ <table class="crud-content-info" > <tr > <td align=" ...

  5. git 删除误上传的.idea文件

    问题: 提交项目的时候忘记添加.gitignore文件,误上传了文件(如.idea)如何解决?(本文以.idea文件夹举例) 1.将项目文件拉取下来 git pull origin master 2. ...

  6. 附加题：将四则运算源代码上传到Github账户上

    1.创建仓库用于存储管理本地文件 2.远程添加github上的Blog仓库. 3.获取github中Blog仓库的地址. 4.在Add Remote窗口中填写名字.Location. 5.将本地文件通 ...

  7. linux设备驱动程序该添加哪些头文件以及驱动常用头文件介绍（转）

    原文链接:http://blog.chinaunix.net/uid-22609852-id-3506475.html 驱动常用头文件介绍 #include <linux/***.h> 是 ...

  8. innerHTML动态添加标签的注意事项

    在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

  9. vs解决方案中添加文件夹

    一般我们在github上面看到的项目结构基本都是把项目放到src文件夹中,test放测试 查了半天也没查到这个是怎么产生的...这边只能用比较笨的方法来完成. 解决方法中是允许我们添加解决方案文件夹, ...

随机推荐

  1. 如何禁止使用teamviwer的使用

    前几天有人问我teamviwer怎么禁止,刚开始做实验的时候过滤了teramviwer.com解析出来的IP,可是还是没有用,其实将teamviwer登陆的服务器地址在路由器上过滤,teramviwe ...

  2. SE 2014年4月4日

    如图OSPF自治系统中有4个区域,要求如图配置使得中所有网络均能够相互访问为了网络安全及优化网络性能: 使用ospf实现全网互通: [RT1]ospf 1 router-id 1.1.1.1 [RT1 ...

  3. Codeforces 549G. Happy Line 馋

    非常有趣的贪婪: Let's reformulate the condition in terms of a certain height the towers, which will be on t ...

  4. deinstall oracle 11g on linux

    deinstall oracle 11g on linux   From 11gR2, oracle provide us an deinstall tool. With that now we ca ...

  5. spring的长处 ioc aop

    spring 的长处? 1.减少了组件之间的耦合性 ,实现了软件各层之间的解耦 2.能够使用easy提供的众多服务.如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它非 ...

  6. 二叉树的建立与遍历（山东理工OJ）

    题目描写叙述 已知一个按先序序列输入的字符序列,如abc,,de,g,,f,,,(当中逗号表示空节点).请建立二叉树并按中序和后序方式遍历二叉树,最后求出叶子节点个数和二叉树深度. 输入 输入一个长度 ...

  7. ORA-00020的思考

    今天,历史的图书馆例行检查DB,发现alert.log有一"ORA-00020: maximum number of processes (150) exceeded",这是一个常 ...

  8. Java EE (3) -- Java EE 6 Web Services Developer Certified Expert(1z0-897)

    Create an SOAP web service in a servlet container Create a RESTful web service in a servlet containe ...

  9. 尝到awk

    我前几天写的sed,这个时候继续了解它的兄弟,awk,两者都使用,一种感觉.既可以用来处理场.假设你想要做文本处理.sed删除.匹配,一些频繁更换使用,假设每一行文本,你想深入,一些每行和列处理的,例 ...

  10. strchr,wcschr 和strrchr, wcsrchr,_tcschr,_tcsrchr功能

           strchr,wcschr 和strrchr, wcsrchr,_tcschr,_tcsrchr功能 (1) char *strchr( const char *string, int ...