ajaxFileUpload+struts2多文件上传(动态添加文件上传框)

上一篇文章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();" οnclick="addFile();">加入</a><span><table id="down"></table></span></br><input type="button" οnclick="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();' οnclick='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类型

效果如图：

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

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

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

ajaxFileUpload+struts2多文件上传(动态添加文件上传框)相关推荐

php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
Linux上传文件没有权限，添加文件权限命令
1.进入需要被上传的目录中 cd 需要被上传的目录路径 2.获取root权限,这个命令切换用户为root,且不需要root的密码,输入当前用户的密码即可 sudo su 3.添加文件权限,-R可以让文 ...
用nero刻录视频文件的时候不能添加文件
我用的是nero的oem版本,发现在刻录视频vcd光盘的时候,如果添加视频文件选择的是dvd视频文件的话,则不能添加文件,可能还有别的功能限制,最后安装一个Nero 7 PlugIn Pack v1. ...
linux svn添加新文件夹,linux svn 添加文件夹
安装doxygen 安装包 doxygen-1.7.4.linux.bin.tar.gz(可在官网下载) 命令: 1) tar xvfz doxygen-1.7.4.linux.bin.tar.gz ...
动态添加表格中下拉框
父级页面 <div class="threePart"><ul><li style="width:114px"><sp ...
php 多文件上传控件,php 动态多文件上传
php 动态多文件上传更新时间:2009年01月18日 06:01:56 作者: php 动态多文件上传实例代码,前台是javascript后台用的是php 文件上传代码 view plainc ...
静态html js文件上传,js实现动态添加上传文件页面
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选 ...
PHP动态多文件上传的具体代码
PHP动态多文件上传分为两步,第一步为文件上传的代码,第二步则是文件提交的代码.希望我们通过这次的学习能加深大家所掌握的知识. AD: 大家在通过对PHP语言的学习,应该大致都可以掌握文件上传的方法. ...

ajaxFileUpload+struts2多文件上传(动态添加文件上传框)

ajaxFileUpload+struts2多文件上传(动态添加文件上传框)相关推荐

最新文章

热门文章