动态多附件上传----经典解决方案

动态多附件上传

---- 经典解决方案

    动态多附件上传，在目前的 B/S 系统中经常会遇到这方面的需求，基于开源的理念，在此我把几个解决方案做详细的介绍。目的在于提高自己的描述问题的能力，同时给遇到同样问题的朋友提供一些线索，以便节省宝贵时间。

 

上次项目是做一个 ** 管理系统，其中有一个模块是作品发布，作品发布模块就需要实现这样一个功能：

      新建一个作品，作品包含一些基本的信息，而且要求要有一个或多个附件，每个附件又要求有作品概要（即作品附件和作品概要一一对应）。

系统要求用 struts 来实现。

在讨论解决方案之前，首先要了解的是。在客户端请求服务器时提交表单，表单的内容只能为 String 型和 FormFile 型（ FormFile 类型只有在 Struts 中才有），不能提交自己定义的 dto 对象。但是可以提交自己定义的 dto 中的 String 成员和 FormFile 成员。

了解了这个原理之后，我开始阐述第一种解决方案；

 

第一种解决方案：间接动态多附件上传

基本思路： 定义一个 ProductForm 类

  Class  ProductForm extends  ActionForm{

  String  pro_name;

  …….               // 其他一些基本的成员变量；

 

// 生成 get 和 set 方法；

}

在 jsp 页面上用相关的标签定义作品的字段；

如： <html:text property=”pro_name” />

动态多附件则用普通标签实现，没有在 ProductForm 中定义相应的字段。因此， Action 取值也不能直接从 ActionForm 中取值，因为 ActionForm 中根本没有相应的成员。

这里给出相关代码：

Jsp 部分：

< TABLE id = &apos;mytable&apos; >                                                                 < tr >< td >        </ td >   </ tr >

                                                                                    </ TABLE >

                  < html:button value = " 添加新附件 " styleClass = "btn" onclick = "add_Row(mytable);" property = "add_newFile" />

动态添加附件域在 jsp 中的代码是：

var i = 0;

function add_Row(the_table)    { // 动态 增加一行， 实际 上也就是增加一个表格

          var    the_row,the_cell;  

          var    cur_rows=the_table.rows.length;

          the_row=cur_rows== null ?-1:(cur_rows);

       //   var    i=the_row;    

          var    newrow=the_table.insertRow(i); // 得到插入位置  

                 newrow.id = i;

          the_cell=newrow.insertCell(0);

                          the_cell.innerHTML= "<table width=&apos;359&apos; border=&apos;0&apos; cellspacing=&apos;0&apos; id=&apos;table&apos;>" 

                    + "<tr>"

                    + "<td width=&apos;300&apos;><input id=&apos; <%= Constants.RES_NEW_FILE_PARAMETER_NAME %> " +i+ "&apos; name=&apos; <%= Constants.RES_NEW_FILE_PARAMETER_NAME %> " +i+ "&apos; type=&apos;file&apos;  οnchange=&apos;fileTypeCheck(this);&apos;  οnpaste=&apos;return   false&apos;   οnkeypress=&apos;return   false&apos;  οnkeydοwn=&apos;return  false&apos; οncοntextmenu=&apos;return  false;&apos;></td>"

                    + "<td width=&apos;55&apos;><input name=&apos;deleteRow&apos; type=&apos;button&apos; class=&apos;btn&apos; value=&apos; 删 除此域 &apos; οnclick=&apos;del(" +i+ ");&apos;></td>"

                    + "</tr>"

                    + "<tr>"

                    + "<td ><span class=&apos;useBB&apos;> 文件概要 说 明 [&lt;=50 汉 字 ]</span></td>"

                    + "<td class=&apos;style6&apos;>&nbsp;</td>"

                    + "</tr>"

                    + "<tr>"

                    + "<td>"

                    + "<textarea  name=&apos;" +i+ "&apos; class=&apos;new_files_comnt&apos; οnchange=&apos;checkLength(this,100);&apos;></textarea></td>"

                    + "<td align=&apos;left&apos; valign=&apos;top&apos;>&nbsp;"