Struts2+JQuery.uploadify插件实现带进度的多文件上传示例

[java]  view plain copy print ?

1. /** 
2.  * Struts2Test 
3.  * 顺便的文件下载的Action 
4.  */  
5. package com.labci.struts2.action;  
6. import java.io.FileInputStream;  
7. import java.io.InputStream;  
8. import java.io.OutputStream;  
9. import javax.servlet.http.HttpServletRequest;  
10. import javax.servlet.http.HttpServletResponse;  
11. import org.apache.struts2.interceptor.ServletRequestAware;  
12. import org.apache.struts2.interceptor.ServletResponseAware;  
13. import com.opensymphony.xwork2.ActionSupport;  
14. /** 
15.  * @author Bill Tu(tujiyue/iwtxokhtd) 
16.  * Jun 8, 2011[9:15:15 PM] 
17.  * 
18.  */  
19. public class DownloadFileAction extends ActionSupport implements  
20.         ServletRequestAware, ServletResponseAware {  
21.       
22.     /** 
23.      *  
24.      */  
25.     private static final long serialVersionUID = -7448748577778248376L;  
26.     private HttpServletRequest request;  
27.     private HttpServletResponse response;  
28.     private String savePath;  
29.       
30.     @Override  
31.     public String execute() throws Exception {  
32.           
33.         String fileName=request.getParameter("fileName");  
34.         String fullPath=getSavePath()+"//"+fileName;  
35.         fileName=new String(fileName.getBytes("utf-8"),"iso-8859-1");  
36.         InputStream is=new FileInputStream(fullPath);  
37.         int len=0;  
38.         byte []buffers=new byte[1024];  
39.         response.reset();  
40.         response.setContentType("application/x-msdownload");  
41.         response.addHeader("Content-Disposition", "attachment;filename=/""+fileName+"/"");  
42.           
43.         //把文件内容通过输出流打印到页面上供下载  
44.         while((len=is.read(buffers))!=-1){  
45.             OutputStream os=response.getOutputStream();  
46.             os.write(buffers, 0, len);  
47.         }  
48.           
49.         is.close();  
50.           
51.         return SUCCESS;  
52.     }  
53.     public void setServletRequest(HttpServletRequest req) {  
54.         this.request=req;  
55.     }  
56.     public void setServletResponse(HttpServletResponse resp) {  
57.         this.response=resp;  
58.     }  
59.     @SuppressWarnings("deprecation")  
60.     public String getSavePath() {  
61.         return request.getRealPath(savePath);  
62.     }  
63.     public void setSavePath(String savePath) {  
64.         this.savePath = savePath;  
65.     }  
66.       
67. }  

 

[java]  view plain copy print ?

1. /** 
2.  * Struts2Test 
3.  * 使用Struts2上传文件 
4.  */  
5. package com.labci.struts2.action;  
6. import java.io.File;  
7. import java.io.FileInputStream;  
8. import java.io.FileOutputStream;  
9. import java.util.List;  
10. import javax.servlet.http.HttpServletRequest;  
11. import org.apache.struts2.interceptor.ServletRequestAware;  
12. import com.opensymphony.xwork2.ActionSupport;  
13. /** 
14.  * @author Bill Tu(tujiyue/iwtxokhtd) 
15.  * Jun 8, 2011[8:31:01 PM] 
16.  * 
17.  */  
18. public class UploadFileAction extends ActionSupport implements  
19.         ServletRequestAware {  
20.     /** 
21.      *  
22.      */  
23.     private static final long serialVersionUID = -1896915260152387341L;  
24.     private HttpServletRequest request;  
25.     public void setServletRequest(HttpServletRequest req) {  
26.         this.request=req;  
27.     }  
28.       
29.       
30.     private List<File> fileName;//这里的"fileName"一定要与表单中的文件域名相同  
31.     private List<String> fileNameContentType;//格式同上"fileName"+ContentType  
32.     private List<String> fileNameFileName;//格式同上"fileName"+FileName  
33.     private String savePath;//文件上传后保存的路径  
34.       
35.     public List<File> getFileName() {  
36.         return fileName;  
37.     }  
38.   
39.     public void setFileName(List<File> fileName) {  
40.         this.fileName = fileName;  
41.     }  
42.   
43.     public List<String> getFileNameContentType() {  
44.         return fileNameContentType;  
45.     }  
46.   
47.     public void setFileNameContentType(List<String> fileNameContentType) {  
48.         this.fileNameContentType = fileNameContentType;  
49.     }  
50.   
51.     public List<String> getFileNameFileName() {  
52.         return fileNameFileName;  
53.     }  
54.   
55.     public void setFileNameFileName(List<String> fileNameFileName) {  
56.         this.fileNameFileName = fileNameFileName;  
57.     }  
58.   
59.     @SuppressWarnings("deprecation")  
60.     public String getSavePath() {  
61.         return request.getRealPath(savePath);  
62.     }  
63.   
64.     public void setSavePath(String savePath) {  
65.         this.savePath = savePath;  
66.     }  
67.     @Override  
68.     public String execute() throws Exception {  
69.         File dir=new File(getSavePath());  
70.         if(!dir.exists()){  
71.             dir.mkdirs();  
72.         }  
73.         List<File> files=getFileName();  
74.         for(int i=0;i<files.size();i++){  
75.             FileOutputStream fos=new FileOutputStream(getSavePath()+"//"+getFileNameFileName().get(i));  
76.             FileInputStream fis=new FileInputStream(getFileName().get(i));  
77.             byte []buffers=new byte[1024];  
78.             int len=0;  
79.             while((len=fis.read(buffers))!=-1){  
80.                 fos.write(buffers,0,len);  
81.             }  
82.         }  
83.         return SUCCESS;  
84.     }  
85.   
86. }  

 

[xhtml]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5. <struts>  
6.     <constant name="struts.devMode" value="false" />  
7.     <!-- 改变struts2默认为2M的上传文件大小限制 -->  
8.     <constant name="struts.multipart.maxSize" value="1024000000"/>  
9.     <package name="upload" extends="struts-default">  
10.         <action name="uploadFile" class="com.labci.struts2.action.UploadFileAction">  
11.             <param name="savePath">/upload</param>  
12.             <result name="success">index.jsp</result>  
13.         </action>  
14.         <action name="downloadFile" class="com.labci.struts2.action.DownloadFileAction">  
15.             <param name="savePath">/upload</param>  
16.             <result name="success">index.jsp</result>  
17.         </action>  
18.     </package>  
19. </struts>  

 

[xhtml]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
5.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
6.     <filter>  
7.         <filter-name>struts2</filter-name>  
8.         <filter-class>  
9.             org.apache.struts2.dispatcher.FilterDispatcher  
10.         </filter-class>  
11.     </filter>  
12.     <filter-mapping>  
13.         <filter-name>struts2</filter-name>  
14.         <url-pattern>*.action</url-pattern>  
15.     </filter-mapping>  
16.     <welcome-file-list>  
17.         <welcome-file>index.jsp</welcome-file>  
18.     </welcome-file-list>  
19. </web-app>  

 

[javascript]  view plain copy print ?

1. <%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>  
2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
4. <html>  
5.   <head>  
6.     <title>Struts2结合JQuery.uploadify实现带进度的多文件上传示例</title>  
7.     <link href="js/uploadify.css" mce_href="js/uploadify.css" rel="stylesheet" type="text/css"/>  
8.     <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" ></mce:script>     
9.     <mce:script type="text/javascript" src="js/swfobject.js" mce_src="js/swfobject.js" ></mce:script>     
10.     <mce:script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js" mce_src="js/jquery.uploadify.v2.1.4.min.js" ></mce:script>  
11.     <mce:script type="text/javascript"><!--  
12.    
13.         $(function() {  
14.             $("#cancelBtn").hide();  
15.             $("#full").hide();  
16.             $('#strutsUploadFile').uploadify({  
17.                   'uploader'  : 'js/uploadify.swf',  
18.                   'script'    : 'uploadFile.action',  
19.                   'cancelImg' : 'js/cancel.png',  
20.                   'fileDataName':'fileName',  
21.                   //解决中文按钮名的好方式  
22.                   'buttonImg' : 'images/select.jpg',  
23.                   //可选  
24.                   'height'    : 20,  
25.                   //可选  
26.                   'width'     : 50,  
27.                   //设置允许上传的文件格式  
28.                   //'fileExt'   : '*.jpg;*.gif;*.png',  
29.                   //设置允许上传的文件格式后，必须加上下面这行代码才能帮你过滤  
30.                   //'fileDesc'    : 'Image Files',  
31.                   //允许连续上传多个文件  
32.                   'multi':'true',  
33.                   //一次性最多允许上传多少个,不设置的话默认为999个  
34.                   'queueSizeLimit' : 3,  
35.                   //每个文件允许上传的大小(字节)  
36.                   //'sizeLimit'   : 102400,  
37.                   'onComplete'  : function(event, ID, fileObj, response, data) {  
38.                         //当每个文件上传完成后的操作  
39.                         $("#cancel").hide();  
40.                         $("#full").hide();  
41.                         $("#show").append( "<a href="/" mce_href="/""downloadFile.action?fileName="+fileObj.name+"/">"+fileObj.name+"</a><br/>");  
42.                         },  
43.                   'onAllComplete':function(event,data) {  
44.                         //当所有文件上传完成后的操作  
45.                         $("#cancelBtn").hide();  
46.                         if(data.errors==0){  
47.                             $("#allShow").append("所有文件已上传成功(本次共上传"+data.filesUploaded+"个),上传总大小:"+data.allBytesLoaded+"字节,平均传输速度："+data.speed+"KB/s");  
48.                         }else{  
49.                             $("#allShow").append("成功上传"+data.filesUploaded+"个文件，失败"+data.errors+"个,上传总大小:"+data.allBytesLoaded+"字节,平均传输速度："+data.speed+"KB/s");  
50.                         }  
51.                   },  
52.                   'onOpen': function(event,ID,fileObj) {  
53.                         //当有文件正在上传时的操作  
54.                         $("#cancelBtn").show();  
55.                   },  
56.                   'onQueueFull': function (event,queueSizeLimit) {  
57.                         //当添加待上传的文件数量达到设置的上限时的操作  
58.                         $("#full").append("<font color='red'><b>已经达到上传数量限制了,不能再添加了</b></color><br/>");  
59.                         $("#full").show();  
60.                         return false;  
61.                   },  
62.                   'onCancel': function(event,ID,fileObj,data) {  
63.                         //当取消所有正在上传文件后的操作  
64.                         $("#cancelBtn").hide();  
65.                   }  
66.             });               
67.         });  
68.       
69. // --></mce:script>      
70.   </head>  
71.     
72.   <body>  
73.     <div id="full"></div>  
74.     <div id="allShow"></div>  
75.     <div id="show"></div>  
76.     <input type="file"  name="fileName" id="strutsUploadFile"/><br/>    
77.     <input type="button" οnclick="javascript:$('#strutsUploadFile').uploadifyUpload()" value="确定上传"/>  
78.      <input type="button" id="cancelBtn" οnclick="javascript:$('#strutsUploadFile').uploadifyClearQueue()" value="取消上传"/>  
79.   </body>  
80. </html>  

 

 

只要有文件正在上传，则会出现“取消上传”按钮供取消所有上传文件

 

 

上传成功后可点相应链接进行下载：

 

 

 

添加待上传文件数量超过设置上传数量时的情况：

 

其它的操作细节不再列举。