要在ExrtJS框架实现选择多文件上传，FileUploadField已经无法满足需求，所以采用了 swfUpload上传控件，上传窗口如下：

多选文件进行上传（其实是每个文件异步上传），可以中途停止文件上传，移除所选文件等操作。上传窗口代码如下：



var ctx = '<%=request.getContextPath()%>';


Ext.onReady(function(){

    Ext.QuickTips.init();

    new Ext.Window({

        width : 650,

        title : '选择目标文件上传',

        height : 300,

        layout : 'fit',

        items : [

            {

                xtype:'uploadPanel',

                border : false,

                fileSize : 1024*50,//限制文件大小kb

                uploadUrl : ctx+'/uploadFiles.action',

                flashUrl : ctx+'/swfupload.swf',//flash文件路径

                filePostName : 'file', //后台接收参数名称

                fileTypes : '*.*',//可上传文件类型 *.doc

                postParams : {savePath:'upload'} //需要传到后台的参数

            }

        ]

    }).show();

});




构建完列表后 afterrender 监听函数添加flash生成文件选择窗口：




keel.UploadPanel.superclass.constructor.call(this,{

        tbar : [

            {text:'添加文件',iconCls:'add',ref:'../addBtn'},'->',

            {text:'上传',ref:'../uploadBtn',iconCls:'up',handler:this.startUpload,scope:this},'-',

            {text:'停止上传',ref:'../stopBtn',iconCls:'delete',handler:this.stopUpload,scope:this,disabled:true},'-',

            {text:'移除所有',ref:'../deleteBtn',iconCls:'delete2',handler:this.deleteAll,scope:this},'-'

        ],

        layout : 'fit',

        items : [this.gp],

        listeners : {

            'afterrender':function(){

                var em = this.getTopToolbar().get(0).el.child('em');

                var placeHolderId = Ext.id();

                em.setStyle({

                    position : 'relative',

                    display : 'block'

                });

                em.createChild({

                    tag : 'div',

                    id : placeHolderId

                });

                this.swfupload = new SWFUpload(Ext.apply(this.setting,{

                    button_width : em.getWidth(),

                    button_height : em.getHeight(),

                    button_placeholder_id :placeHolderId

                }));

                this.swfupload.uploadStopped = false;

                Ext.get(this.swfupload.movieName).setStyle({

                    position : 'absolute',

                    top : 0,

                    left : -2//此处需设置为0，否则flash偏右按钮失效

                });

            },

            scope : this,

            delay : 100

        }

    });




后台uploadFiles.action上传成功{"success":true}，上传失败返回{"success":false}，前台接收进行处理：




//文件上传成功后触发的事件处理函数 
onUploadSuccess : function(file, serverData) {

        var me = this.customSettings.scope_handler;

        var ds = me.gp.store;

        if (Ext.util.JSON.decode(serverData).success) {

            for(var i=0;i<ds.getCount();i++){

                var rec =ds.getAt(i);

                if(rec.get('id')==file.id){

                    rec.set('state', file.filestatus);

                    rec.commit();

                }

            }

        }else{

            for(var i=0;i<ds.getCount();i++){

                var rec =ds.getAt(i);

                if(rec.get('id')==file.id){

                    rec.set('percent', 0);

                    rec.set('state', -3);

                    rec.commit();

                }

            }

        }

        me.linkBtnEvent();

    }




index.jsp 页面代码如下：




<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>swfUpload demo</title>

    <link rel="stylesheet" href="<%=request.getContextPath()%>/public/css/common.css" type="text/css" />

    <script type='text/javascript' src="<%=request.getContextPath()%>/public/ext/ext-base.js"></script>

    <script type='text/javascript' src="<%=request.getContextPath()%>/public/ext/ext-all.js"></script>

    <script type="text/javascript" src="<%=request.getContextPath()%>/public/ux/uploader/swfupload.js"></script>

    <script type="text/javascript" src="<%=request.getContextPath()%>/public/ux/uploader/uploaderPanel.js"></script>

  </head>

  <body>

  </body>

</html>




衷心感谢博主： http://czpae86.iteye.com/blog/834123?page=2#comments


-------------------------------------------------华丽丽的分割线----------------------------------------------


满心欢喜的提交了代码，但测试那边同事反馈火狐浏览器无法上传，经过查找网上很多人遇到这种情况，原来是FireFox下使用swfUpload flash上传文件session丢失这个bug。由于项目后台做了登录用户权限控制，点击上传的时候验证未通过请求被抛弃，所以文件上传失败。


网上技术大拿有如下文章：


当页面需要使用 session 中的用户信息时，却无法在 Firefox 下使用它进行正常的文件上传。在 IE 下，上传工具能够工作，而一到 Firefox 下，SWFUpload 就会提示错误 302。通过从 Fiddler 抓包，发现上传文件的请求被 302 重定向到了登陆页面，所以无法正常上传文件。也就是说，之前用户登陆后的 session 信息在 Flash 发送的上传请求中丢失了。再一看请求的 header，当中没有可以用来标识当前 session ID 的 cookie 值(对于 J2EE 为 JSESSIONID，PHP 为 PHPSESSID 等)。这是什么原因呢？经过一番搜索，找到了 Adobe 官方的一篇文章，说道：




A FileReference.upload() currently does not use the same cookies as your browser session if you are using Firefox (on Windows). In such cases, cookie information has to be inserted manually. 




好吧，这个解释虽然很清楚地表明，Flash 在 Firefox 下进行文件上传不会使用浏览器 cookie 中的 session ID，但是貌似并没有回答文章标题当中的“为什么”，即为什么不使用和浏览器中的 session ID 来进行通信。


看来 cookie 是指望不上了，那只能像上面说的那样“手工”传递 session ID 了。于是我们可以在 URL 中拼接一个如 ";jsessionid=blahblah" 的字符串(注意要拼在路径之后，参数之前)，像下面这样：




uploadUrl : 'http://example.com/app;jsessionid=blahblah'




按Servlet 规范 7.1.3 节中的规定，当客户端不接受 cookie 时，Servlet 容器应当能解析出这类 URL 中的 JSESSIONID，来维持当前 session 的状态。其他服务器端环境中也有类似的机制。于是我们对文件上传功能做了一定的修改：在用户进入上传页面时，就把当前的 session ID 写到页面中，作为 JavaScript 变量拼接到 SWFUpload 上传文件的目标 URL 中，Flash 就可以利用我们人工传入的 JSESSIONID 来维持登陆状态了。当开始上传时，Flash 通过自己的连接通道向服务器发送数据，但是因为请求的路径中包含了 session 信息所以可以和浏览器的 session 状态保持同步，服务器可以通过 URL 中的 session ID 来获取用户登录的信息。


于是，302 错误被解决了，看起来一切都 OK 了。可是，不久我们又发现了新的问题：当用户打开上传页面后较长时间没有操作，服务器端的 session 超时了，这个时候进行文件的上传用的还是超时的那个 session ID，所以会失败也是应该的。但是当这个时候用户重新进行了登录，再次进入上传页面上传，却仍然会失败，只有重新启动浏览器才能再次进行上传。这是为什么 呢？从服务器端错误来看，还是用户的登陆信息丢失的问题，也就是说，Flash 在上传文件时，还是没能将用户进行过登陆的这个 session ID 成功传递给服务器端。通过在 Fiddler 中抓包分析，终于找到了原因。


文章来源http://lync.in/session-trap-on-uploading-files-using-flash-in-firefox/


这个方法可以解决大部分网友遇到seesion丢失的问题，但我的项目里调用的是jsf的统一登录接口，没有得到产生的一级域名cookie，按照这种解决方式上传请求还是会被抛弃，焦头烂额的搞了几个小时，突然想到让上传的方法不被Interceptor拦截不就解决了吗，山重水复疑无路，最后在拦截器配置文件里修改一下：




exclude.path=/common/uploadFiles.do,/common/uploadImgs.do




经过这样的一个过程基本上实现了多文件上传的功能，适用于后台上传文件的代码没有用到seesion这情况。
												


											
Extjs3 + swfUpload实现多文件上传控件的更多相关文章
	

    
								
  1. jquery文件上传控件 Uploadify 问题记录
		
    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
    
		
    2. 
						
  2. jquery文件上传控件 Uploadify
		
    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
    
		
    3. 
						
  3. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
		
    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
    
		
    4. 
						
  4. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件（转）
		
    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
    
		
    5. 
						
  5. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
		
    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
    
		
    6. 
						
  6. 对FileUpload文件上传控件的一些使用方法说明
		
    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
    
		
    7. 
						
  7. ***文件上传控件bootstrap-fileinput的使用和参数配置说明
		
    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
    
		
    8. 
						
  8. 符合BME风格的弹窗\菜单\表格\文件上传控件
		
    1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......
    
		
    9. 
						
  9. jquery文件上传控件 Uploadify   可以和ajax交互
		
    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Hadoop jobhistory历史服务器
			
    Hadoop自带了一个历史服务器,可以通过历史服务器查看已经运行完的Mapreduce作业记录,比如用了多少个Map.用了多少个Reduce.作业提交时间.作业启动时间.作业完成时间等信息.默认情况下 ...
    
			
    2. 
						
  2. 【poj2741】 Colored Cubes
			
    http://poj.org/problem?id=2741 (题目链接) 题意 给出n个骰子,每一面都有一种颜色,问最少更改多少个面的颜色可以使所有骰子通过旋转后完全相同. solution 迷之d ...
    
			
    3. 
						
  3. JDK与Java SE/EE/ME的区别
			
    1. Java SE(Java Platform,Standard Edition). Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用 ...
    
			
    4. 
						
  4. hdu 2857       求点关于线段的对称点
			
    本来很简单的一个题,但是有个大坑: 因为模板中Tline用到了直线的一般方程ax+by+c=0,所以有种很坑的情况需要特判: 斜率不存在啊喂 老子坑了一下午2333 #include <math ...
    
			
    5. 
						
  5. dedecms /include/helpers/archive.helper.php SQL Injection Vul
			
    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Dedecms会员中心注入漏洞 Relevant Link: http: ...
    
			
    6. 
						
  6. Android数据库更新——上万条数据的插入
			
    在实际情况下,很可能遇到会向一个表中插入10万条数据,而这样的数据库更新,如果用寻常的方式,在SQLiteOpenHelper.onUpdate()方法中不断的执行SQL语句,那么效率是可想而知的,甚 ...
    
			
    7. 
						
  7. pack、unpack自制二进制“数据库”
			
    引言 pack.unpack函数,如果没有接触过socket,这个可能会比较陌生,这两个函数在socket交互的作用是组包,将数据装进一个二进制字符串,和对二进制字符串中的数据进行解包,这个里面有好多 ...
    
			
    8. 
						
  8. Always review
			
    Data structures A data structure is a way to store and organize data in order to facilitate access a ...
    
			
    9. 
						
  9. AngularJs $animate 让页面动起来
			
    $animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的 ...
    
			
    10. 
						
  10. POJ 2533 Longest Ordered Subsequence（最长上升子序列（NlogN）
			
    传送门 Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subseque ...
    
			
    11.