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

上篇文章http://www.jb51.net/article/124489.htm介绍了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();" rel="external nofollow" 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类型

效果如图：

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

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

总结

以上所述是小编给大家介绍的AjaxFileUpload结合Struts2实现多文件上传(动态添加文件上传框)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Struts2动态结果集代码示例

    动态结果集可以在action中指定要跳转的页面(${}是OJNL表达式,不是EL表达式) struts.xml: <package name="resultTypes" namespace="/r" extends="struts-default"> <action name="result_mul" class="cn.edu.hpu.action.ResultAction"> &

  • Struts2实现生成动态验证码并验证实例代码

     一.基本流程: 产生一个验证码页面(很小)→嵌入到表单中→点击可以刷新页面→表单提交时验证. 二.方法: 1.定义TestAction,实现画图方法 package com.zhuguang.action; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Map; import javax.se

  • 详解Struts2动态方法调用

    动态方法就是一个Action对应多个请求,减少Action的数量 1.指定method属性 <action name="addAction" method="add" class="com.venn.action.HelloWorldAction"> <result>/jsp/add.jsp</result> </action> 2.感叹号(!)方式(不推荐使用) <action name=&

  • Struts2学习笔记(3)-DMI动态调用方式

    什么是DMI?DMI即所谓的动态方法调用. Action在执行的时候并不一定要执行execute方法,可以在配置文件中配置Action的时候用method=来指定执行哪个方法,也可以在url地址中动态指定(动态方法调用DMI). 第一种方式,在struts.xml中对Action添加method: 复制代码 代码如下: <struts>     <constant name="struts.devMode" value="true" />  

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

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

    上篇文章http://www.jb51.net/article/124489.htm介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如果需求不确定是多少文件 则我们就需要动态的添加文件上传框,以实现灵活性. 基于上篇基本框架是不变的,主要修改以下几个方面 1.jQuery实现动态添加删除文件上传框 2.获取文件上传框的ID 3.ajaxfileupload.js里将ID数组转换为需要的Object数组 依次解决上面问题 一.实现动态添加删除文件上传框 <body> &

  • php 动态多文件上传

    文件上传代码 view plaincopy to clipboardprint? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • js实现动态添加上传文件页面

    js实现动态添加上传文件页面

    发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来.下面是实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title

  • C#/VB.NET 在PDF中添加文件包（Portfolio）的方法

    PDF文件包(Portfolio)允许用户将多种不同类型的文件如Word.Excel.PDF.PowerPoint和图片等集合到一个PDF文件中,用户可以打开.更改PDF文件包中的单个文件.添加文件包时,可支持创建文件包时并直接将文件添加到文件包:或者创建文件包的同时创建文件夹,并将文件添加到文件夹. 环境准备:程序中需要使用到PDF类库工具(Spire.PDF for .NET hotfix 6.5.15及以上版本)下载后,解压,将Bin文件夹下的dll文件添加引用到VS程序.如下效果: 1.

  • Java Struts图片上传至指定文件夹并显示图片功能

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="multipart/form-data",表示提交的数据时二进制的 并且必须是method="post" <%@ page language="java" contentType="text/html; charset=utf-8" page

  • 用java在web环境下上传和下载文件的技巧

    文件上传在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件上传功能. common-fileupload组件是apache的一个开源项目之一,可以从http://jakarta.apache.org/commons/fileupload/下载. 用该组件可实现一次上传一个或多个文件,并可限制文件大小. 下载后解压zip包,将commons-fileupload-

  • asp.net+js 实现无刷新上传解析csv文件的代码

    前阵子工作中用到,贴上代码,仅保留上传有关的代码,发现code其实很少. 上传页面html/js 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • PHP使用curl模拟post上传及接收文件的方法

    本文实例讲述了PHP使用curl模拟post上传及接收文件的方法.分享给大家供大家参考,具体如下: public function Action_Upload(){ $this->path_config(); exit(); $furl="@d:\develop\JMFrameworkWithDemo.rar"; $url= "http://localhost/DemoIndex/curl_pos/"; $this->upload_file_to_cdn

  • 上传多个文件的PHP脚本

    译者注:本文的原名是<Creating a Multi-File Upload Script in PHP>.我个个觉得这文章写得一般,代码也不是非常专业,但是它比较短,而且一时间也找不到好一点的文章,就把这个译过来了.其实PHP手册里也有一节是说多文件上传的,大家可以对比对比.文章内有的字句译出来不太顺眼,所以按照原意作了一定量的修改.本人水平有限,还望各位高手多指点. 导言 作为一个PHP的程序员,我曾遇到过这么一个客户,他需要一个可以同时上传多个文件的表单.因此,一天夜里我就用了一个小时

  • PHP实现文件上传和多文件上传

    在PHP程序开发中,文件上传是一个使用非常普遍的功能,也是PHP程序员的必备技能之一.值得高兴的是,在PHP中实现文件上传功能要比在Java.C#等语言中简单得多.下面我们结合具体的代码实例来详细介绍如何通过PHP实现文件上传和多文件上传功能. 要使用PHP实现文件上传功能,我们先来编写两个php文件:index.php和upload.php.其中,index.php页面用于提交文件上传的表单请求,upload.php页面用于接收上传的文件并进行相应处理. 首先,我们来编写一个简单的index.

随机推荐