当前位置:编程学习 > JS >>

Struts轻松搞定多文件上传

在前面的《Apache Commons FileUpload实现多文件上传》文章中介绍了http://使用第三方组件ApacheCommons FileUpload来实现多文件的上传,对比今天用struts实现的多文件上传,总觉得还是struts用起来更加顺手,也更加简洁方便,不忍自己独享,所以拿出来跟大家一块分享一下。如果你读过前面提到的那篇文章,相信再理解本文将会更加容易,另外提供源码以方便大家学习(点此下载源码)。由于本文属于一片纯技术文章,废话就不多说了,下面看一下struts是如何实现多文件上传的吧。
 
1.      首先来看前台。在前台页面中通过js实现上传控件的添加和删除。描述的详细一些就是点一下“增加一行”按钮就会增加一个上传控件,同样点击该控件后边的“删除”则会将该上传控件去除。目的在于用js实现添加任意数目的文件的功能。
 
[html] 
 
<span style="font-family:Microsoft YaHei;font-size:14px;"><%@ page language="java" pageEncoding="GB18030"%>  
  
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>  
    
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
    <title>multiUploadDemo</title>  
    <script type="text/javascript" src="js/myjs.js">  
      
    </script>  
 </head>  
    <body bgcolor="#ffffff">  
       <div id="status"></div>  
            
       <form method="post" action="upload.do" enctype="multipart/form-data" >  
      
            <table id="tb"></table>  
  
            <input type="button" name="AddOnLine" value="增加一行" onclick="additem('tb')"/>  
            <input type="submit" name="btnUpload" value="上传" onclick="upload()"/>  
        </form>  
    </body>  
</html>  
</span>  
在前台页面中引用的js文件中的代码如下:
 
[javascript] 
 
<span style="font-family:Microsoft YaHei;font-size:14px;"> var num = 0;  
  
     function upload(){  
         document.getElementById("status").innerHTML = "文件上传中...";  
       }  
  
    function additem(id)  
    {  
     var row,cell,str;  
  
     row = eval("document.all["+'"'+id+'"'+"]").insertRow();  
     if(row != null )  
        {  
           cell = row.insertCell();  
           str="<input type="+'"'+"file"+'"'+" name=uploadFile["+ num +"].file><input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+" onclick='deleteitem(this,"+'"'+"tb"+'"'+");'>"  
          cell.innerHTML=str;  
        }  
     num++;  
    }  
    function deleteitem(obj,id)  
    {  
     var rowNum,curRow;  
     curRow = obj.parentNode.parentNode;  
     rowNum = eval("document.all."+id).rows.length - 1;  
     eval("document.all["+'"'+id+'"'+"]").deleteRow(curRow.rowIndex);  
    }  
    function callback(msg)  
    {  
     document.getElementById("status").innerHTML = "文件上传完成...<br>" + msg;  
    }</span>  
 
2.      前台页面在实现了动态添加上传控件的功能后,真正用来上传文件的后台代码就要隆重登场了,后台代码中新建三个类,他们分别为UploadActionForm.java,UploadFile.java以及UploadTestAction.java。
 
UploadActionForm.java类代码如下:
 
[java]
 
<span style="font-family:Microsoft YaHei;font-size:14px;">package myupload;  
import java.util.ArrayList;  
import java.util.List;  
  
import org.apache.struts.action.ActionForm;  
import org.apache.struts.upload.FormFile;  
  
public class UploadActionForm extends ActionForm {  
      
        private List myFiles;  
  
        public UploadActionForm() {  
            myFiles = new ArrayList();  
              
        }  
  
        public List getMyFiles() {  
            return myFiles;  
        }  
  
        // 注意这个方法的定义 不加中间的循环是会出错的  
  
        public UploadFile getUploadFile(int index) {  
            int size = myFiles.size();  
            if (index > size - 1) {  
                for (int i = 0; i < index - size + 1; i++) {  
                    myFiles.add(new UploadFile());  
                }  
            }  
            return (UploadFile) myFiles.get(index);  
        }  
  
        public void setMyFiles(List myFiles) {  
            this.myFiles = myFiles;  
        }  
}  
</span>  
UploadFile.java类代码如下:
 
[java] 
 
<span style="font-family:Microsoft YaHei;font-size:14px;">package myupload;  <
补充:Web开发 , Jsp ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,