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

时间：2022-08-30 10:24:17

URL:http://blog.csdn.net/xuweilinjijis/article/details/8876305

之前在网上找过很多相关资料，很多所谓的批量上传都是忽悠人的，真正的批量上传指的是 用户一次性可以选择多个文件，然后上传是将所有选取的文件上传到服务器。java中真正可以实现批量上传的技术大致有两种：一种是通过flash；一种是 通过applet；不过html5也可以支持批量拖选。两种方式有各自的优缺点，其中flash对于浏览器兼容性较好，基本可以满足市面上大众浏览器，缺 点就是对于上传文件大小有限制，如果用户只需要上传一些图片或者文档文件的话，这种选择还是比较理想的；applet方式可以上传大文件，但是需要浏览器 支持jdk并安装相关插件。

      今天这个项目采用的是flash方式。整体设计思路：采用ext+swfupload进行上传界面显示，后台采用strust2来处理上传文件。



最终项目运行效果图如下：

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

前台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

 

标签：

相关文章