利用swfupload实现java文件批量上传

╰半橙微兮° 2022-09-17 10:24 137阅读 0赞

之前在网上找过很多相关资料，很多所谓的批量上传都是忽悠人的，真正的批量上传指的是用户一次性可以选择多个文件，然后上传是将所有选取的文件上传到服务器。java中真正可以实现批量上传的技术大致有两种：一种是通过flash；一种是通过applet；不过html5也可以支持批量拖选。两种方式有各自的优缺点，其中flash对于浏览器兼容性较好，基本可以满足市面上大众浏览器，缺点就是对于上传文件大小有限制，如果用户只需要上传一些图片或者文档文件的话，这种选择还是比较理想的；applet方式可以上传大文件，但是需要浏览器支持jdk并安装相关插件。

今天这个项目采用的是flash方式。整体设计思路：采用ext+swfupload进行上传界面显示，后台采用strust2来处理上传文件。

**最终项目运行效果图如下：**

![20130502160053501][]

**前台jsp文件源码index.jsp：**

**\[html\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **<**%@ page contentType="text/html;charset=gb2312" language="java"%**>**  
2.  **<****html****>**  
3.      **<****head****>**  
4.          **<****title****>**swf 上传**</****title****>**  
5.          **<****link** rel="stylesheet" type="text/css"  
6.              href="js/css/ext-all.css" **/>**  
7.            
8.      **</****head****>**  
9.    
10.       
11.       
12. **<****body****>**  
13.  **<****script**  type="text/javascript" src="js/ext-base.js"**>****</****script****>**  
14.  **<****script**  type="text/javascript" src="js/ext-all.js"**>****</****script****>**  
15.  **<****script** src="swf/swfupload.js" type="text/javascript"**>****</****script****>**  
16.  **<****script** src="swf/swfupload.speed.js" type="text/javascript"**>****</****script****>**  
17.  **<****script** src="swf/mode.js" type="text/javascript"**>****</****script****>**  
18.  **<****script** src="swf/handlers.js" type="text/javascript"**>****</****script****>**   
19.     **<****script** type="text/javascript" src="js/prototype/prototype.js"**>****</****script****>**  
20.     **<****script** type="text/javascript" src="js/bramus/jsProgressBarHandler.js"**>****</****script****>**  
21.  **<****script**  type="text/javascript"**>**  
22. // 允许上传文件的全部大小  
23. var limtallsize=50000000;  
24.   
25.   function UploadGrid()  
26.   \{    
27.          var mine=this;       
28.          var states=\[\{v:-1,t:'等待'\},\{v:0,t:'就绪'\},\{v:1,t:'上传中'\},\{v:2,t:'停止'\},\{v:3,t:'成功'\},\{v:4,t:'失败'\}\];    
29.          function  statesRender(v)  
30.          \{  
31.             for(var i=0;i**<****states.length** ;i++)  
32.             \{  
33.                if(states\[i\].v==v)  
34.                \{  
35.                  return states\[i\].t;  
36.                \}  
37.             \}  
38.          \}  
39.          function rateRender(value, metaData, record, rowIndex, cellIndex, store)  
40.          \{  
41.             v=value?value:0;  
42.             //return "**<****table** border='0' cellpadding='0' cellspacing='0' width='100%' height='100%'**>****<****tr****>****<****td** bgcolor='\#0000FF' height='100%' align='center' width='"+v+"%'**>****<****font** color='white'**>**"+v+"%**</****font****>****</****td****>****<****td****>****</****td****>****</****tr****>****</****table****>**";  
43.             //setProgress(v);  
44.             return "**<****span** id=\\"element6\_"+record.data.id+"\\" rate=\\""+v+"\\"**>****</****span****>**";  
45.          \}  
46.                  
47.          var rn=new Ext.grid.RowNumberer();  
48.          var sm = new Ext.grid.CheckboxSelectionModel(\{singleSelect:false\});                       
49.          var cm = new Ext.grid.ColumnModel(\[      
50.             rn,  
51.             sm,   
52.             \{header:'文件名称',dataIndex:'fileName',menuDisabled:true,width: 100\},  
53.             \{header:'大小'   ,dataIndex:'fileSize',menuDisabled:true,width: 100\},  
54.             \{header:'进度'   ,dataIndex:'rate',menuDisabled:true,width: 180,renderer:rateRender\},  
55.             \{header:'速度'   ,dataIndex:'speed',menuDisabled:true\},  
56.             \{header:'状态'   ,dataIndex:'state',menuDisabled:true,renderer:statesRender\}  
57.            \]);      
58.   
59.             this.ds = new Ext.data.Store(\{          
60.             proxy: new Ext.data.HttpProxy(\{url:'test!query.action',method:'post'\}),  
61.             remoteSort:false,  
62.             reader: new Ext.data.JsonReader(  
63.             \{totalProperty:'records',root:'root'\},         
64.             \[  
65.             \{name: 'id'\},  
66.             \{name: 'fileName'\},  
67.             \{name: 'code'\},  
68.             \{name: 'fileSize'\},  
69.             \{name: 'rate'\},  
70.             \{name: 'speed'\},  
71.             \{name: 'state'\}  
72.             \])   
73.               
74.         \});    
75.           
76.         var RC=Ext.data.Record.create(\[  
77.                  \{name: 'id', mapping: 'id'\},  
78.                  \{name: 'code', mapping: 'code'\},  
79.                  \{name: 'fileName', mapping: 'fileName'\},  
80.                  \{name: 'fileSize', mapping: 'fileSize'\},  
81.                  \{name: 'rate', mapping: 'rate'\},  
82.                  \{name: 'speed', mapping: 'speed'\}  
83.                  \]);         
84.           
85.         this.grid = new Ext.grid.GridPanel(\{        
86.           
87.         ds: mine.ds,  
88.         cm: cm,  
89.         sm: sm,   
90.         anchor:'100%',  
91.         loadMask:\{msg:'数据加载中...'\},  
92.         viewConfig:\{forceFit:true\},  
93.         height:300,   
94.         width :600,  
95.         tbar:\[\{id:'spanSWFUploadButton',text:'-'\},'-'\],    
96.         listeners:\{  
97.           render:function()  
98.           \{  
99.             // ytb-sep  
100.             var cmp=Ext.getCmp("spanSWFUploadButton");  
101.             var pcont=cmp.getEl().parent();          
102.             pcont.update("**<****span** id='spanSWFUploadButton' class='blank'**>****</****span****>**");  
103.             var swfu = new SWFUpload(\{  
104.                 upload\_url : "upload.action",  
105.                 post\_params : \{  
106.                     "god" : "god","uid" : "u"  
107.                 \},  
108.   
109.                 flash\_url : "swf/swfupload.swf",  
110.                 button\_placeholder\_id : "spanSWFUploadButton",  
111.                 button\_image\_url : "swf/bt.png",  
112.                 button\_text\_right\_padding : 100,                  
113.                 button\_width: 61,  
114.                 button\_height : 22,  
115.                   
116.                 button\_action : SWFUpload.BUTTON\_ACTION.SELECT\_FILES,  
117.                 // handler here   
118.                 swfupload\_loaded\_handler : Handlers.swfUploadLoaded,                  
119.                 file\_queued\_handler : Handlers.fileQueued,  
120.                 file\_queue\_error\_handler : Handlers.fileQueueError,   
121.                 upload\_progress\_handler : Handlers.uploadProgress,  
122.                 upload\_error\_handler : Handlers.uploadError,  
123.                 upload\_success\_handler : Handlers.uploadSuccess               
124.             \});  
125.             swfu.grid=mine.grid;  
126.             swfu.ds=mine.ds;  
127.             swfu.RC=RC;           
128.         \}  
129.       \}   
130.       \});   
131.         
132.   \}  
133.   
134.   Ext.onReady(function()\{    
135.        Ext.QuickTips.init();  
136.        Ext.form.Field.prototype.msgTarget = 'side';  
137.        Ext.BLANK\_IMAGE\_URL ='../../images/s.gif';  
138.        var grid=new UploadGrid();  
139.        var  win = new Ext.Window(\{  
140.                 title:'上传表格测试',  
141.                 el:'panel',  
142.                 width:620,  
143.                 height:350,  
144.                 closeAction:'hide',//关闭窗口时渐渐缩小  
145.                 plain: true,  
146.                  
147.                 items:\[grid.grid\],  
148.    
149.                 buttons: \[\{  
150.                     text:'Submit',  
151.                     disabled:true  
152.                 \},\{  
153.                     text: 'Close',  
154.                     handler: function()\{  
155.                         win.hide();  
156.                     \}  
157.                 \}\]  
158.             \});  
159.          win.show(this);     
160.   \})               
161.  **</****script****>**  
162.  **<****div** id="panel"**>****</****div****>**   
163. **</****body****>**  
164. **</****html****>**

后台UploadAction.java:

**\[java\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **package** upload.action;  
2.    
3.  **import** java.io.File;  
4.  **import** java.text.DateFormat;  
5.  **import** java.text.SimpleDateFormat;  
6.  **import** java.util.Date;  
7.  **import** org.apache.struts2.ServletActionContext;  
8.    
9.  **public** **class** UploadAction  
10. \{  
11.     **private** File Filedata;  
12.   
13.     **private** String FiledataFileName;  
14.   
15.     **private** String FiledataContentType;  
16.   
17.     // 文件夹目录  
18.     **private** **static** **final** String basePath = "fileupload\\\\groupResource";  
19.   
20.     **public** String execute()  
21.     \{  
22.           
23.         String s = (String)ServletActionContext.getRequest().getParameter("god");  
24.         String s2 = (String)ServletActionContext.getRequest().getParameter("uid");  
25.         **if** (Filedata != **null** && Filedata.length() > 0)  
26.         \{  
27.             // 群组名字作为最后的文件夹  
28.             String groupFileName = "haoba";  
29.               
30.             String uploadPath = ServletActionContext.getServletContext()  
31.                     .getRealPath(basePath+"\\\\"\+groupFileName);  
32.             File path = **new** File(uploadPath);  
33.               
34.             **if** (!path.exists())  
35.             \{  
36.                 path.mkdirs();  
37.             \}**else**\{  
38.                 //文件已存在  
39.                 //FiledataFileName   
40.             \}  
41.               
42.             String newPath = uploadPath +"\\\\"\+FiledataFileName;  
43.             Filedata.renameTo(**new** File(newPath));  
44.              
45.             // 保存到数据库中的路径  
46.             String savePath = basePath+"\\\\"+groupFileName+"\\\\"+FiledataFileName;  
47.               
48.         \}  
49.   
50.         **return** **null**;  
51.     \}  
52.   
53.     // 上传文件  
54.     **private** String pathSplit(String timeStr, String o, String n)  
55.     \{  
56.         StringBuffer sb = **new** StringBuffer();  
57.         **for** (String a : timeStr.split(o))  
58.         \{  
59.             sb.append(a);  
60.             sb.append(n);  
61.         \}  
62.         sb.deleteCharAt(sb.length() - 1);  
63.         **return** sb.toString();  
64.     \}  
65.   
66.     **public** **static** String format(Date date, String parttern)  
67.     \{  
68.         DateFormat df = **new** SimpleDateFormat(parttern);  
69.         **return** df.format(date);  
70.     \}      
71.       
72.     **public** File getFiledata()  
73.     \{  
74.         **return** Filedata;  
75.     \}  
76.   
77.     **public** **void** setFiledata(File filedata)  
78.     \{  
79.         Filedata = filedata;  
80.     \}  
81.   
82.     **public** String getFiledataFileName()  
83.     \{  
84.         **return** FiledataFileName;  
85.     \}  
86.   
87.     **public** **void** setFiledataFileName(String filedataFileName)  
88.     \{  
89.         FiledataFileName = filedataFileName;  
90.     \}  
91.   
92.     **public** String getFiledataContentType()  
93.     \{  
94.         **return** FiledataContentType;  
95.     \}  
96.   
97.     **public** **void** setFiledataContentType(String filedataContentType)  
98.     \{  
99.         FiledataContentType = filedataContentType;  
100.     \}  
101.       
102.     **public** **static** **void** main(String\[\] args) \{  
103.         System.out.println(0.444<1);  
104.     \}  
105. \}

[20130502160053501]: /images/20220828/c9bb51ca082e4d4dba7957bb1f30e02e.png
[view plain]: http://blog.csdn.net/xuweilinjijis/article/details/8876305#