Struts1.x系列教程(9):上传任意多个文件

简介:
Struts2教程7:上传任意多个文件

     《Struts1.x系列教程(8):上传单个文件》 中给出的例子可以看出,在 Struts1.x 中上传单个文件是非常简单的,但在实际应用中,上传文件的个数一般是不确定的,如在网络硬盘中,用户可以根据自己的需要上传任意多个文件(当然,网络硬盘一次上传文件的数目一般也是有上限的,如 50 个,但用户可以只上传了 3 个文件,因此,在这种情况下,上传文件的个数也是不确定的)。如果读者用过“网易网盘”或其他类似的服务程序,它们的上传文件功能基本上都是根据用户选择的文件多少来添加要上传的文件(并不是一开始就在界面上放很多 <input type=’file’> 元素来让用户输入上传文件名)。为了让读者也可以使用 Struts 来实现这个功能,在本节将给出一个用 Struts 实现的类似“网易网盘”的上传任意多个文件的 Web 程序。在实现 Web 程序之前,让我们先看看图 1 所示的主页面。


图1
     在本程序中,用户通过在文本框中输入本地文件名或使用“浏览”按钮选择要上传的文件后,就会在界面的下方添加这个被录入的文件名,如果录入有误,或是不想上传某个文件,可以使用“删除”功能将当前文件删除。在确认正确录入所有的上传文件后,使用“上传”按钮开始上传文件。
     实现这个Web 程序的基本步骤和 《Struts1.x系列教程(8):上传单个文件》 一文中 所给出的例子类似,我们可按下面五步来实现这个Web 程序:
【第 1 步】 建立上传文件的JSP 页面
    
要想实现上述的功能,需要在JavaScript 中使用DOM 技术(关于JavaScript DOM 技术的相关内容已经超出本文讨论的范围,如果读者想了解JavaScript DOM 技术的细节部分,请参阅其他相关技术资料)。   
    在<samples工程目录>目录中建立一个uploadMoreFile.jsp文件,代码如下:
   <% @ page pageEncoding = " GBK " %>
  
<% @ taglib uri = " http://struts.apache.org/tags-html "  prefix = " html " %>
  
< html >
      
< head >
          
< title > 上传任意多个文件(总大小不能超过2M) </ title >
  
< script  language ="javascript" >
  
//  在DOM中插入一个上传文件列表项(div元素)和一个<input type="file"/>元素
   function  insertNextFile(obj) 
  { 
//  获取上传控制个数
       var  childnum  =  document.getElementById( " files " ).getElementsByTagName( " input " ).length;       
      
var  id  =  childnum  -   1 ;
      
var  fullName  =  obj.value;
      
//  插入<div>元素及其子元素
       var  fileHtml  =  '';
      fileHtml 
+=  ' < div  id  =   " file_preview' + id + ' "  style  = " border-bottom: 1px solid #CCC; " > ';
      fileHtml 
+=  ' < img  width  = 30  height  =   30  src  = " images/file.gif "  title = " ' + fullName + ' " /> ';
      fileHtml 
+=  ' < a href = " javascript:; "  onclick = " removeFile(' + id + '); " > 删除 </ a >   & nbsp; & nbsp;';
      fileHtml 
+=  fullName.substr(fullName.lastIndexOf('\\') + 1 + '   </ div > ';
  
      
var  fileElement  =  document.getElementById( " files_preview " );
      fileElement.innerHTML 
=  fileElement.innerHTML  +  fileHtml;    
      obj.style.display 
=  'none';    //  隐藏当前的<input type=”file”/>元素
      addUploadFile(childnum);   //  插入新的<input type=”file”/>元素
  }
  
//   插入新的<input type=”file”/>元素,适合于不同的浏览器(包括IE、FireFox等)
   function  addUploadFile(index)
  {
      
try    //  用于IE浏览器
      {   
          
var  uploadHTML  =  document.createElement(  " <input type='file' id='file_ "   +  index  +  
                                  "
' name='file[ "   +  index  +   " ]' onchange='insertNextFile(this)'/> " );
          document.getElementById(
" files " ).appendChild(uploadHTML);
      }
      
catch (e)   //  用于其他浏览器
      { 
          
var  uploadObj  =  document.createElement( " input " );
          uploadObj.setAttribute(
" name " " file[ "   +  index  +   " ] " );
          uploadObj.setAttribute(
" onchange " " insertNextFile(this) " );
          uploadObj.setAttribute(
" type " " file " );
          uploadObj.setAttribute(
" id " " file_ "   +  index);
          document.getElementById(
" files " ).appendChild(uploadObj);
      }
  }
  
function  removeFile(index)   //  删除当前文件的<div>和<input type=”file”/>元素
  {
      document.getElementById(
" files_preview " ).removeChild(document.getElementById( " file_preview "   +  index)); 
      document.getElementById(
" files " ).removeChild(document.getElementById( " file_ "   +  index));    
  }
  
function  showStatus(obj)   //  显示“正在上传文件”提示信息
  {
    document.getElementById(
" status " ).style.visibility = " visible " ;
  }
  
</ script >
      
</ head >
      
< body >
          
< html:form   enctype ="multipart/form-data"  action ="uploadMoreFile" >
              
< span  id ="files" >     <% --   在此处插入用于上传文件的input元素  -- %>
                  
< input   type ="file"  id ="file_0"  name ="file[0]"  onchange ="insertNextFile(this)"   />
               
</ span > &nbsp;&nbsp;
               
< html:submit  value =" 上传 "  onclick ="showStatus(this);" />
          
</ html:form >    < p >
          
< div  id  ="status"  style ="visibility:hidden;color:Red" > 正在上传文件 </ div >   < p >
          
<% --   在此处用DOM技术插入上传文件列表项   -- %>
          
< div  id ="files_preview"  style  ="width:500px;height:500px; overflow :auto"   ></ div >   
      
</ body >
  
</ html >
     uploadMoreFile.jsp 文件中使用了JavaScript DOM 技术来控制新加入的上传文件以及删除不需要的上传文件。并且在加入<input type=”file”/> 元素时考虑了不同的浏览器的差异(详见addUploadFile )。

【第 2 步】 建立ActionForm 的子类

    
<samples 工程目录>\src\actionform 目录中建立一个UploadMoreForm.java 文件,代码如下:
   package  actionform;
  
import  org.apache.struts.action. * ;
  
import  org.apache.struts.upload.FormFile;
  
import  java.util. * ;
  
public   class  UploadMoreForm  extends  ActionForm
  {
      
private  List < FormFile >  myFiles  =   new  ArrayList < FormFile > ();   //  用于保存不定数量的FormFile对象
  
      
public  FormFile getFile( int  i)   //  索引属性
      {
          
return  myFiles.get(i);
      }
      
public   void  setFile( int  i, FormFile myFile)   //  索引属性
      {
          
if  (myFile.getFileSize()  >   0 )   //  只有上传文件的字节数大于0,才上传这个文件
          {
              myFiles.add(myFile);
          }
      }
      
public   int  getFileCount()   //  获得上传文件的个数
      {
          
return  myFiles.size();
      }
  }
     UploadMoreFile 类中使用了List 对象来保存不定数量的FormFile 对象。读者也可以使用其他的集合类来保存这些FormFile 对象。而且在UploadMoreFile 类中使用了带索引的属性,详见getFile setFile 方法。在这两个方法中,第一个参数是一个int 类型的变量。要注意的是,索引属性的get set 方法的第一个参数必须是int 类型的变量,否则系统会不认这个索引属性。这个索引属性用于和客户端不定数量的<input type=”file” /> 元素相对应,每一个索引项代表一个<input type=”file” /> 元素上传的文件(FormFile 对象)。

【第 3 步】 建立Struts 动作类(Action 的子类)
     由于在 《Struts1.x系列教程(8):上传单个文件》 一文 的例子中 UploadAction 类中已经有了一个saveFile 方法用于保存单个上传文件,因此,处理多个上传文件的Struts 动作类可以从UploadAction 类继承。在<samples 工程目录>\src\action 目录中建立一个UploadMoreAction.java 文件,代码如下:
   package  action;
  
  
import  javax.servlet.http. * ;
  
import  org.apache.struts.action. * ;
  
import  org.apache.struts.upload.FormFile;
  
import  java.io. * ;
  
import  actionform. * ;
  
  
public   class  UploadMoreAction  extends  UploadAction
  {  
      
public  ActionForward execute(ActionMapping mapping, ActionForm form,
              HttpServletRequest request, HttpServletResponse response)
      {
          UploadMoreForm umForm 
=  (UploadMoreForm) form;
          PrintWriter out 
=   null ;
          
int  count  =   0 ;
          
try
          {
              response.setCharacterEncoding(
" GBK " );
              out 
=  response.getWriter();
              count 
=  umForm.getFileCount();    //  获得上传文件的总数
               for  ( int  i  =   0 ; i  <  count; i ++ )
              {
                  saveFile(umForm.getFile(i));  
//  开始保存每一个上传文件          
              }
              out.println(
" 成功上传 "   +  String.valueOf(count)  +   " 个文件. " );
          }
          
catch  (Exception e)
          {
              out.println(e.getMessage());
          }
          
return   null ;
      }
  }

【第 4 步】 配置struts-config.xml 

    在这一步来配置一下在第2步和第3步分别建立的ActionForm和Action的子类。打开struts-config.xml文件,在<form-beans>元素中加入如下的子元素: 
< form-bean  name ="uploadMoreForm"  type ="actionform.UploadMoreForm"   />                 
    在<action-mappings>元素中加入如下的子元素: 
   < action  name ="uploadMoreForm"  path ="/uploadMoreFile"  scope ="request"  type ="action.UploadMoreAction"   />
【第 5 步】 复制gif 图片
     本例中使用了一个gif 图,在Web 根目录中建立一个images 目录,并复制一个file.gif 文件(30*30 )到这个目录(读者可以使用自己喜欢的任何gif 图片)。
    
由于在 《Struts1.x系列教程(8):上传单个文件》 一文 的例子中已经设置了上传文件的保存路径和上传文件的大小限制,因此,在本例中仍然使用这一设置。但要注意的是,在上传多个文件时,最大上传文件尺寸指的是所有上传文件的尺寸之和,而不是指每个文件的尺寸。
    启动Tomcat后,在IE地址栏中输入如下的URL来测试程序:

http://localhost:8080/samples/uploadMoreFile.jsp





 本文转自 androidguy 51CTO博客,原文链接:http://blog.51cto.com/androidguy/215198,如需转载请自行联系原作者


相关文章
|
1月前
|
Java
java实现从HDFS上下载文件及文件夹的功能,以流形式输出,便于用户自定义保存任何路径下
java实现从HDFS上下载文件及文件夹的功能,以流形式输出,便于用户自定义保存任何路径下
54 2
java实现从HDFS上下载文件及文件夹的功能,以流形式输出,便于用户自定义保存任何路径下
|
2月前
|
XML JavaScript 数据格式
xercesc库中文保存XML功能实现
本文介绍了如何使用xercesc库实现中文内容的XML文件保存,包括初始化平台、创建文档、添加节点和序列化输出的完整代码示例。
xercesc库中文保存XML功能实现
|
存储 Java
Java实现文件上传到本地(自定义保存路径)
Java实现文件上传到本地(自定义保存路径)
778 0
|
存储 安全 PHP
无回显的任意文件上传
无回显的任意文件上传
SpringMVC学习(十):文件的上传和下载
在SpringMVC中使用ResponseEntity实现下载文件的功能
111 0
|
Java 应用服务中间件 Linux
springboot上传下载文件(1)(项目和文件资源放在同一个服务器上)
springboot上传下载文件(1)(项目和文件资源放在同一个服务器上)
323 0
springboot上传下载文件(1)(项目和文件资源放在同一个服务器上)
|
安全 Java
【JavaWeb】案例:读取 WEB 工程下的资源文件、文件下载、点击切换验证码
本期主要介绍读取 WEB 工程下的资源文件、文件下载、点击切换验证码
142 0
【JavaWeb】案例:读取 WEB 工程下的资源文件、文件下载、点击切换验证码
|
XML 前端开发 Java
SpringMVC--常用的三种文件实现上传实现方式你知道么?
文件的上传与下载基本上是web项目中会用到的技术,在web学习中我们用到的是 Apache fileupload这个组件来实现上传,在springmvc中对它进行了封装,让我们使用起来比较方便,但是底层还是由Apache fileupload来实现的。springmvc中由MultipartFile接口来实现文件上传。
346 0