之前在网上找过很多相关资料，很多所谓的批量上传都是忽悠人的，真正的批量上传指的是用户一次性可以选择多个文件，然后上传是将所有选取的文件上传到服务器。java中真正可以实现批量上传的技术大致有两种：一种是通过flash；一种是通过applet；不过html5也可以支持批量拖选。两种方式有各自的优缺点，其中flash对于浏览器兼容性较好，，基本可以满足市面上大众浏览器，缺点就是对于上传文件大小有限制，如果用户只需要上传一些图片或者文档文件的话，这种选择还是比较理想的；applet方式可以上传大文件，但是需要浏览器支持jdk并安装相关插件。
今天这个项目采用的是flash方式。整体设计思路：采用ext+swfupload进行上传界面显示，后台采用strust2来处理上传文件。
最终项目运行效果图如下：
前台jsp文件源码index.jsp：
<%@ page contentType="text/html;charset=gb2312" language="java"%><html><head><title>swf 上传</title><link rel="stylesheet" type="text/css"href="js/css/ext-all.css" /></head><body> <script type="text/javascript" src="js/ext-base.js"></script> <script type="text/javascript" src="js/ext-all.js"></script> <script src="swf/swfupload.js" type="text/javascript"></script> <script src="swf/swfupload.speed.js" type="text/javascript"></script> <script src="swf/mode.js" type="text/javascript"></script> <script src="swf/handlers.js" type="text/javascript"></script> <script type="text/javascript" src="js/prototype/prototype.js"></script><script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script> <script type="text/javascript">// 允许上传文件的全部大小var limtallsize=50000000; function UploadGrid() {var mine=this;var states=[{v:-1,t:’等待’},{v:0,t:’就绪’},{v:1,t:’上传中’},{v:2,t:’停止’},{v:3,t:’成功’},{v:4,t:’失败’}];function statesRender(v){for(var i=0;i<states.length ;i++){if(states[i].v==v){return states[i].t;}}}function rateRender(value, metaData, record, rowIndex, cellIndex, store){v=value?value:0;//return "<table cellpadding=’0′ cellspacing=’0′><tr><td bgcolor=’#0000FF’><font color=’white’>"+v+"%</font></td><td></td></tr></table>";//setProgress(v);return "<span id=\&;element6_"+record.data.id+"\&; rate=\&;"+v+"\&;></span>";}var rn=new Ext.grid.RowNumberer(); var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});var cm = new Ext.grid.ColumnModel([rn,sm,{header:’文件名称’,dataIndex:’fileName’,menuDisabled:true,width: 100},{header:’大小’ ,dataIndex:’fileSize’,menuDisabled:true,width: 100},{header:’进度’ ,dataIndex:’rate’,menuDisabled:true,width: 180,renderer:rateRender},{header:’速度’ ,dataIndex:’speed’,menuDisabled:true},{header:’状态’ ,dataIndex:’state’,menuDisabled:true,renderer:statesRender}]);this.ds = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url:’test!query.action’,method:’post’}),remoteSort:false,reader: new Ext.data.JsonReader({totalProperty:’records’,root:’root’},[{name: ‘id’},{name: ‘fileName’},{name: ‘code’},{name: ‘fileSize’},{name: ‘rate’},{name: ‘speed’},{name: ‘state’}])});var RC=Ext.data.Record.create([{name: ‘id’, mapping: ‘id’},{name: ‘code’, mapping: ‘code’},{name: ‘fileName’, mapping: ‘fileName’},{name: ‘fileSize’, mapping: ‘fileSize’},{name: ‘rate’, mapping: ‘rate’},{name: ‘speed’, mapping: ‘speed’}]);this.grid = new Ext.grid.GridPanel({ds: mine.ds,cm: cm,sm: sm,anchor:’100%’,loadMask:{msg:’数据加载中…’},viewConfig:{forceFit:true},height:300,width :600,tbar:[{id:’spanSWFUploadButton’,text:’-‘},’-‘],listeners:{render:function(){// ytb-sepvar cmp=Ext.getCmp("spanSWFUploadButton");var pcont=cmp.getEl().parent();pcont.update("<span></span>");var swfu = new SWFUpload({upload_url : "upload.action",post_params : {"god" : "god","uid" : "u"},flash_url : "swf/swfupload.swf",button_placeholder_id : "spanSWFUploadButton",button_image_url : "swf/bt.png",button_text_right_padding : 100,button_width: 61,button_height : 22,button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,// handler hereswfupload_loaded_handler : Handlers.swfUploadLoaded,file_queued_handler : Handlers.fileQueued,file_queue_error_handler : Handlers.fileQueueError,upload_progress_handler : Handlers.uploadProgress,upload_error_handler : Handlers.uploadError,upload_success_handler : Handlers.uploadSuccess});swfu.grid=mine.grid;swfu.ds=mine.ds;swfu.RC=RC;} }});} Ext.onReady(function(){Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = ‘side’;Ext.BLANK_IMAGE_URL =’../../images/s.gif’;var grid=new UploadGrid();var win = new Ext.Window({title:’上传表格测试’,el:’panel’,width:620,height:350,closeAction:’hide’,//关闭窗口时渐渐缩小plain: true,items:[grid.grid],buttons: [{text:’Submit’,disabled:true},{text: ‘Close’,handler: function(){win.hide();}}]});win.show(this);})</script> <div id="panel"></div></body></html>后台UploadAction.java:package upload.action;import java.io.File;import java.text.DateFormat;import java.text.SimpleDateFormat;import java.util.Date;import org.apache.struts2.ServletActionContext;public class UploadAction{private File Filedata;private String FiledataFileName;private String FiledataContentType;// 文件夹目录private static final String basePath = "fileupload\\groupResource";public String execute(){String s = (String)ServletActionContext.getRequest().getParameter("god");String s2 = (String)ServletActionContext.getRequest().getParameter("uid");if (Filedata != null && Filedata.length() > 0){// 群组名字作为最后的文件夹String groupFileName = "haoba";String uploadPath = ServletActionContext.getServletContext().getRealPath(basePath+"\\"+groupFileName);File path = new File(uploadPath);if (!path.exists()){path.mkdirs();}else{//文件已存在//FiledataFileName}String newPath = uploadPath +"\\"+FiledataFileName;Filedata.renameTo(new File(newPath));// 保存到数据库中的路径String savePath = basePath+"\\"+groupFileName+"\\"+FiledataFileName;}return null;}// 上传文件private String pathSplit(String timeStr, String o, String n){StringBuffer sb = new StringBuffer();for (String a : timeStr.split(o)){sb.append(a);sb.append(n);}sb.deleteCharAt(sb.length() – 1);return sb.toString();}public static String format(Date date, String parttern){DateFormat df = new SimpleDateFormat(parttern);return df.format(date);}public File getFiledata(){return Filedata;}public void setFiledata(File filedata){Filedata = filedata;}public String getFiledataFileName(){return FiledataFileName;}public void setFiledataFileName(String filedataFileName){FiledataFileName = filedataFileName;}public String getFiledataContentType(){return FiledataContentType;}public void setFiledataContentType(String filedataContentType){FiledataContentType = filedataContentType;}public static void main(String[] args) {System.out.println(0.444<1);}}
源码免费下载地址：
swfupload控件使用指南：
世界上那些最容易的事情中，拖延时间最不费力。
