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

    一. 初始化 腾讯即时通讯sdk 1. 程序日志注册 2. 连接通知回调  专门的类管理 3. 信息通知回调 专门的类 4. 初始化sdk 5. 注册推送 分ios8/ios以前 注册推送成功回调 发 ...

  2. 暑假热身 A. GCC

    GCC编译器是一个由GNU项目维护的编译系统,它支持多种编程语言的编译.但是它并不包含数学运算符“!”.在数学中,这个符号代表阶乘.表达式n!的意思是从1到n的所有整数的乘积. 例如,4!=4*3*2 ...

  3. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

  4. Moebius集群:SQL Server一站式数据平台

    一.Moebius集群的架构及原理 1.无共享磁盘架构 Moebius集群采用无共享磁盘架构设计,各个机器可以不连接一个共享的设备,数据可以存储在每个机器自己的存储介质中.这样每个机器就不需要硬件上的 ...

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

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

  6. ini 文件操作记要(1): 使用 TIniFile

    ini 文件操作记要(1): 使用 TIniFile unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Class ...

  7. 【JAVA、C++】LeetCode 009 Palindrome Number

    Determine whether an integer is a palindrome. Do this without extra space. 解题思路一: 双指针法,逐位判断 Java代码如下 ...

  8. Greedy:Cleaning Shifts(POJ 2376)

      牛的大扫除 题目大意:农夫有N只牛,这些牛要帮助打扫农舍,这些牛只能打扫固定位置(千万要注意这个位置不是连续的),每一段区间必须至少有一只牛打扫,问你至少需要多少只牛?(如果区间不能完全被覆盖,则 ...

  9. Java的switch用法

    下面是switch的用法: var status = msg;        switch (status)    //status是表达式        {            case 0:st ...

  10. js如何往数组Array中添加元素

    转载自:http://blog.sina.com.cn/s/blog_95fa28e60101mwup.html unshift:将参数添加到原数组开头,并返回数组的长度  pop:删除原数组最后一项 ...