【该上传组件已经停止更新,该上传组件已经在项目中使用。在使用过程中如果发现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. [Effective JavaScript 笔记]第44条:使用null原型以防止原型污染

    第43条中讲到的就算是用了Object的直接实例,也无法完全避免,Object.prototype对象修改,造成的原型污染.防止原型污染最简单的方式之一就是不使用原型.在ES5之前,并没有标准的方式创 ...

  2. Linux守护进程的启动方法

    导读 “守护进程”(daemon)就是一直在后台运行的进程(daemon),通常在系统启动时一同把守护进程启动起来,本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 Web应用写好后 ...

  3. UIView中UIButton设置监听

    红色框框是一个uibutton _priceValueLabel是他的父视图, 必须要把button的父视图设置userInteractionEnabled = YES, button的 监听才会生效 ...

  4. Dynamic Morphing Square(动态变形矩阵)

    题目描述: 解题思路: 先对输入的N进行判断,是否不小于3,如果小于3,需要继续输入一个新的数,知道输入的N比3大. 第一个打印的矩阵,*号为最外面一圈,其余全为-. 第二个打印的矩阵,*号向内缩减了 ...

  5. nyoj 8

    http://acm.nyist.net/JudgeOnline/problem.php?pid=8 #include<stdio.h> #include<iostream> ...

  6. OpenResty(Nginx)+Lua+GraphicsMagick实现缩略图功能

    http://www.hopesoft.org/blog/?p=1188 http://www.imagemagick.org/download/ 2.用法 原始图片是input.jpg,尺寸:160 ...

  7. AtomicInteger源码分析——基于CAS的乐观锁实现

    AtomicInteger源码分析——基于CAS的乐观锁实现 1. 悲观锁与乐观锁 我们都知道,cpu是时分复用的,也就是把cpu的时间片,分配给不同的thread/process轮流执行,时间片与时 ...

  8. jdk新特性

    自动拆装箱子: import org.junit.Test; public class Demo { /* * 自动拆装箱 * */ @Test public void ZhuangXiang() { ...

  9. Selenium webdriver 学习总结-元素定位

    Selenium webdriver 学习总结-元素定位 webdriver提供了丰富的API,有多种定位策略:id,name,css选择器,xpath等,其中css选择器定位元素效率相比xpath要 ...

  10. atom 震动特效

    1.下载atom 2.配置环境变量 3.运行apm install activate-power-mode 4.打开Atom激活(control+alt+o(是o不是零)) 注:新标签若没效果可以ct ...