上一篇文章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. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  2. 在spring MVC的controller中获取ServletConfig

    在使用SmartUpload进行文件上传时,须要用到srevletConfig: 假设是在servlet中写当然是非常easy实现的: private ServletConfig config; // ...

  3. tab功能菜单——使用tab之间不同的交换机div

    需求:在web实现类型的接口tab标签效应 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91eXVqaWUxMTI3/font/5a6L5L2T/fo ...

  4. 一个极其简洁的Python网页抓取程序，自己主动从雅虎財经抓取股票数据

    本程序使用Python 2.7.6编写,扩展了Python自带的HTMLParser,自己主动依据预设的股票代码列表,从Yahoo Finance抓取列表中的数据日期.股票名称.实时报价.当日变化率. ...

  5. Revit 2015 公布！

    Revit 2015 公布了, 如今能够下载.大家能够搜索下中文版的下载. 之前就知道2015 的模型操作速度再次提高, 2015安装后的马上载入跑了一个模型.果然,2015 打开自带的高级模型,不管 ...

  6. 初识缓存以及ehcache初体验

    1.缓存的意义 缓存机制就是将数据库中经常使用的数据取出放入内存中.程序调用时直接从内存中取,丌用每次使用  数据都訪问数据库,这样提高了效率. 2.缓存须要关注的问题 1)  缓存的更新 缓存中的数 ...

  7. uvaLive5713 次小生成树

    uvaLive5713 修建道路使得n个点任意两点之间都可以连通,每个点有都有一定的人口,现在可以免费修一条道路, A是免费修的道路两端结点的人口之和, B的其它不是免费修道路的长度的总和 要求的是A ...

  8. Mac maven环境变量配置

    近期一直在学习使用Macbook,在这里记录一下全部遇到的问题 问题起源: 1.Macbook 安装了Eclipse,Eclipse装入插件maven & git , 可是在git中clone ...

  9. uIP中国的协议文件：Ch01

    uIP0.9 参考 by Doxygen 1.3.3 Tue Oct 7 15:51:00 2003 译: fishOnFly(鱼在飞) uIP-refman中文pdf下载 第1章  uIP TCP/ ...

  10. android 设置默认启动network mode

    network mode常见类型 WCDMA preferred : 0 GSM only : 1 WCDMA only : 2 GSM UMTS : 3 CDMA : 4 ... (参考RILCon ...