标签：style blog http io ar color os 使用 sp
URL:http://blog.csdn.net/xuweilinjijis/article/details/8876305
之前在网上找过很多相关资料，很多所谓的批量上传都是忽悠人的，真正的批量上传指的是 用户一次性可以选择多个文件，然后上传是将所有选取的文件上传到服务器。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
swfupload控件使用指南：http://dl.vmall.com/c0s0bbqp5i
[Pulgin] 利用swfupload实现java文件批量上传
标签：style blog http io ar color os 使用 sp
原文地址：http://www.cnblogs.com/jqmtony/p/4148983.html
