【该上传组件已经停止更新,该上传组件已经在项目中使用。在使用过程中如果发现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

后台返回说明:

  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/

Extjs3.3 + swfUpload2.2 实现多文件上传组件的更多相关文章

  1. Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现

    Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip  ...

  2. Atitit..文件上传组件选型and最佳实践总结(2)----断点续传

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...

  3. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  4. 多文件上传组件FineUploader使用心得

    原文 多文件上传组件FineUploader使用心得 做Web开发的童鞋都知道,需要经常从客户端上传文件到服务端,当然,你可以使用<input type="file"/> ...

  5. ASP中文件上传组件ASPUpload介绍和使用方法

    [导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上 ...

  6. Atitit..文件上传组件选择and最佳实践的总结(2)----HTTP

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 怎样推断一个插件/控件是否支持断点续传?? 1 3. 经常使用的组件选型结果::马 1 4.  ...

  7. 文件上传组件FileUpload 以及邮箱搭建JavaMail

     文件上传与下载 1.1 文件上传 案例: 注册表单/保存商品等相关模块! --à 注册选择头像 / 商品图片 (数据库:存储图片路径 / 图片保存到服务器中指定的目录) 文件上传,要点: 前台: 1 ...

  8. Baidu WebUploader 前端文件上传组件的使用

    简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...

  9. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

随机推荐

  1. Delphi10 安装Graphics32

    一.下载Graphics安装包 官网:www.graphics32.org 下载地址:http://sourceforge.net/projects/graphics32/files/graphics ...

  2. bwa的使用方法

    bwa的使用需要两中输入文件:    Reference genome data(fasta格式 .fa, .fasta, .fna)    Short reads data (fastaq格式 .f ...

  3. HLG2062(make,heap问题)

    最小的n个和 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 129(37 users) Total Accepted: 35(29 u ...

  4. HDOJ 1596

    9899828 2013-12-27 16:42:37 Accepted 1596 3312MS 6668K 711 B C++ 泽泽 floyed暴力 #include<cstdio> ...

  5. Thinkphp中eq,neq,gt,lt等表达式缩写

    eq 等于  equalneq 不等于gt 大于   greater thanegt 大于等于lt 小于     less thanelt 小于等于like LIKEbetween BETWEENno ...

  6. Ubuntu系统如何查看硬件配置信息

    查看ubuntu硬件信息 1, 主板信息 .查看主板的序列号 -------------------------------------------------- #使用命令 dmidecode | ...

  7. 【云计算】开源装机自动化系统 CloudBoot OSInstall 介绍

    "CloudBoot"(OSinstall) 发布了. 产品更新及特点如下: 新增虚拟化操作系统适配:支持主流操作系统:RedHat.CentOS.SUSE.Ubuntu.Wind ...

  8. HTTP认证相关

    Java HTTPBasicAuth http://blog.csdn.net/kkdelta/article/details/28419625Python HTTPBasicAuth http:// ...

  9. Hydra---Linux下的暴力美学

    引自:http://www.cnblogs.com/mchina/archive/2013/01/01/2840815.html 安装:http://www.91ri.org/2867.html yu ...

  10. object-c 系列教程

    1.object-c 基本数据类型 2.object-c 控制语句 3.object-c面向对象1 4.object-c面向对象2 5.object-c 继承多态 动态数据类型