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 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>";
- //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-sep
- var cmp=Ext.getCmp("spanSWFUploadButton");
- var pcont=cmp.getEl().parent();
- pcont.update("<span id='spanSWFUploadButton' class='blank'></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 here
- swfupload_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);
- }
- }
源码免费下载地址:http://dl.vmall.com/c0lmx5394j(不能用了)
新的最新下载地址:http://download.csdn.NET/detail/xuweilinjijis/9714277
swfupload控件使用指南:http://dl.vmall.com/c0s0bbqp5i