之前在网上找过很多相关资料,很多所谓的批量上传都是忽悠人的,真正的批量上传指的是用户一次性可以选择多个文件,然后上传是将所有选取的文件上传到服务器。java中真正可以实现批量上传的技术大致有两种:一种是通过flash;一种是通过applet;不过html5也可以支持批量拖选。两种方式有各自的优缺点,其中flash对于浏览器兼容性较好,基本可以满足市面上大众浏览器,缺点就是对于上传文件大小有限制,如果用户只需要上传一些图片或者文档文件的话,这种选择还是比较理想的;applet方式可以上传大文件,但是需要浏览器支持jdk并安装相关插件。
今天这个项目采用的是flash方式。整体设计思路:采用ext+swfupload进行上传界面显示,后台采用strust2来处理上传文件。
最终项目运行效果图如下:
前台jsp文件源码index.jsp:
1. <%@pagecontentType="text/html;charset=gb2312"language="java"%>
2. <html>
3. <head>
4. <title>swf上传</title>
5. <linkrel="stylesheet"type="text/css"
6. href="js/css/ext-all.css"/>
7.
8. </head>
9.
10.
11.
12. <body>
13. <scripttype="text/javascript"src="js/ext-base.js"></script>
14. <scripttype="text/javascript"src="js/ext-all.js"></script>
15. <scriptsrc="swf/swfupload.js"type="text/javascript"></script>
16. <scriptsrc="swf/swfupload.speed.js"type="text/javascript"></script>
17. <scriptsrc="swf/mode.js"type="text/javascript"></script>
18. <scriptsrc="swf/handlers.js"type="text/javascript"></script>
19. <scripttype="text/javascript"src="js/prototype/prototype.js"></script>
20. <scripttype="text/javascript"src="js/bramus/jsProgressBarHandler.js"></script>
21. <scripttype="text/javascript">
22. //允许上传文件的全部大小
23. varlimtallsize=50000000;
24.
25. functionUploadGrid()
26. {
27. varmine=this;
28. varstates=[{v:-1,t:'等待'},{v:0,t:'就绪'},{v:1,t:'上传中'},{v:2,t:'停止'},{v:3,t:'成功'},{v:4,t:'失败'}];
29. functionstatesRender(v)
30. {
31. for(vari=0;i<states.length;i++)
32. {
33. if(states[i].v==v)
34. {
35. returnstates[i].t;
36. }
37. }
38. }
39. functionrateRender(value,metaData,record,rowIndex,cellIndex,store)
40. {
41. v=value?value:0;
42. //return"<tableborder='0'cellpadding='0'cellspacing='0'width='100%'height='100%'><tr><tdbgcolor='#0000FF'height='100%'align='center'width='"+v+"%'><fontcolor='white'>"+v+"%</font></td><td></td></tr></table>";
43. //setProgress(v);
44. return"<spanid=\"element6_"+record.data.id+"\"rate=\""+v+"\"></span>";
45. }
46.
47. varrn=newExt.grid.RowNumberer();
48. varsm=newExt.grid.CheckboxSelectionModel({singleSelect:false});
49. varcm=newExt.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=newExt.data.Store({
60. proxy:newExt.data.HttpProxy({url:'test!query.action',method:'post'}),
61. remoteSort:false,
62. reader:newExt.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. varRC=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=newExt.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. varcmp=Ext.getCmp("spanSWFUploadButton");
101. varpcont=cmp.getEl().parent();
102. pcont.update("<spanid='spanSWFUploadButton'class='blank'></span>");
103. varswfu=newSWFUpload({
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. //handlerhere
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. vargrid=newUploadGrid();
139. varwin=newExt.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. <divid="panel"></div>
163. </body>
164. </html>
后台UploadAction.java:
1. packageupload.action;
2.
3. importjava.io.File;
4. importjava.text.DateFormat;
5. importjava.text.SimpleDateFormat;
6. importjava.util.Date;
7. importorg.apache.struts2.ServletActionContext;
8.
9. publicclassUploadAction
10. {
11. privateFileFiledata;
12.
13. privateStringFiledataFileName;
14.
15. privateStringFiledataContentType;
16.
17. //文件夹目录
18. privatestaticfinalStringbasePath="fileupload\\groupResource";
19.
20. publicStringexecute()
21. {
22.
23. Strings=(String)ServletActionContext.getRequest().getParameter("god");
24. Strings2=(String)ServletActionContext.getRequest().getParameter("uid");
25. if(Filedata!=null&&Filedata.length()>0)
26. {
27. //群组名字作为最后的文件夹
28. StringgroupFileName="haoba";
29.
30. StringuploadPath=ServletActionContext.getServletContext()
31. .getRealPath(basePath+"\\"+groupFileName);
32. Filepath=newFile(uploadPath);
33.
34. if(!path.exists())
35. {
36. path.mkdirs();
37. }else{
38. //文件已存在
39. //FiledataFileName
40. }
41.
42. StringnewPath=uploadPath+"\\"+FiledataFileName;
43. Filedata.renameTo(newFile(newPath));
44.
45. //保存到数据库中的路径
46. StringsavePath=basePath+"\\"+groupFileName+"\\"+FiledataFileName;
47.
48. }
49.
50. returnnull;
51. }
52.
53. //上传文件
54. privateStringpathSplit(StringtimeStr,Stringo,Stringn)
55. {
56. StringBuffersb=newStringBuffer();
57. for(Stringa:timeStr.split(o))
58. {
59. sb.append(a);
60. sb.append(n);
61. }
62. sb.deleteCharAt(sb.length()-1);
63. returnsb.toString();
64. }
65.
66. publicstaticStringformat(Datedate,Stringparttern)
67. {
68. DateFormatdf=newSimpleDateFormat(parttern);
69. returndf.format(date);
70. }
71.
72. publicFilegetFiledata()
73. {
74. returnFiledata;
75. }
76.
77. publicvoidsetFiledata(Filefiledata)
78. {
79. Filedata=filedata;
80. }
81.
82. publicStringgetFiledataFileName()
83. {
84. returnFiledataFileName;
85. }
86.
87. publicvoidsetFiledataFileName(StringfiledataFileName)
88. {
89. FiledataFileName=filedataFileName;
90. }
91.
92. publicStringgetFiledataContentType()
93. {
94. returnFiledataContentType;
95. }
96.
97. publicvoidsetFiledataContentType(StringfiledataContentType)
98. {
99. FiledataContentType=filedataContentType;
100. }
101.
102. publicstaticvoidmain(String[]args){
103. System.out.println(0.444<1);
104. }
105. }