首页 > 代码库 > [Pulgin] 利用swfupload实现java文件批量上传

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

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文件批量上传