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

最新文章

热门文章