Extjs3.3 + swfUpload2.2 实现多文件上传组件

【该上传组件已经停止更新，该上传组件已经在项目中使用。在使用过程中如果发现bug请大家回复此贴。2011-02-27】

主要是为了用swfUpload实现上传，为了新鲜好玩。

理解swfUpload可以上网查找，以下是在网上找到，个人觉得解释比较全面的文章：

http://blog.endlesscode.com/2010/03/26/swfupload%E6%B5%85%E6%9E%90/

 

请下载最新版的，最近修改了几个问题

 

经过研究，结合Extjs3.3做了以下组件：




 

 

 

本上传组件最新修改为v1.1，加入了状态和行删除。



 

 

最新版本为v1.2，修改了上传状态和进度不同步的bug


 

后台返回说明：


 

 

按钮图标css代码  收藏代码
  1. .add{  
  2.     background-image: url(images/add.gif) !important;  
  3. }  
  4. .up{  
  5.     background-image: url(images/up.gif) !important;  
  6. }  
  7.   
  8. .delete{  
  9.     background-image: url(images/delete.gif) !important;  
  10. }  
  11. .delete2{  
  12.     background-image: url(images/delete2.gif) !important;  
  13. }  

 

使用代码  收藏代码
  1. Ext.onReady(function(){  
  2.     Ext.QuickTips.init();  
  3.     new Ext.Window({  
  4.         width : 650,  
  5.         title : 'swfUpload demo',  
  6.         height : 300,  
  7.         layout : 'fit',  
  8.         items : [  
  9.             {  
  10.                 xtype:'uploadPanel',  
  11.                 border : false,  
  12.                 fileSize : 1024*50,//限制文件大小  
  13.                 uploadUrl : 'uploadFiles.action',  
  14.                 flashUrl : 'swfupload.swf',  
  15.                 filePostName : 'file', //后台接收参数  
  16.                 fileTypes : '*.*',//可上传文件类型  
  17.                 postParams : {savePath:'upload\\'} //上传文件存放目录  
  18.             }  
  19.         ]  
  20.     }).show();  
  21. });  

 

 

最新代码请下载附件！uploader_v1.2.rar

 

当然还有没有完善的地方，请大家自由发挥吧！

同时发表于Extjs官方网：http://www.sencha.com/forum/showthread.php?118058-UploadPanel(Extjs3.0-swfUpload)

 

转载请注明出处：http://czpae86.iteye.com/

 

posted @ 2013-10-11 14:40  yufenghou  阅读(353)  评论(0)  编辑  收藏  举报