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做了以下组件:

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

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

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

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

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

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

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

后台返回说明:

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

  1. .add{
  2. background-image: url(images/add.gif) !important;
  3. }
  4. .up{
  5. background-image: url(images/up.gif) !important;
  6. }
  7. .delete{
  8. background-image: url(images/delete.gif) !important;
  9. }
  10. .delete2{
  11. background-image: url(images/delete2.gif) !important;
  12. }
  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/

上一篇:Node.js 手册查询-1-核心模块方法


下一篇:POI读写Word docx文件