【该上传组件已经停止更新,该上传组件已经在项目中使用。在使用过程中如果发现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 笔记]第3章:使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  2. Unbuntu 下编译安装 PHP 必要库的安装

    2010/08/22 LINUX, PHP 2 COMMENTS 编译环境 sudo apt-get install build-essential xml sudo apt-get install ...

  3. 【OpenStack】OpenStack系列17之OpenStack私有云设计二

  4. Continuous Subarray Sum

    Given an integer array, find a continuous subarray where the sum of numbers is the biggest. Your cod ...

  5. 25.在从1到n的正数中1出现的次数[NumberOf1Between1_N]

    [题目] 输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1 的数字有1,10,11和12,1一共出现了5次. [分析] 这是一道广为流传的goo ...

  6. Java for LeetCode 152 Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  7. Java for LeetCode 047 Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  8. 补丁vs错误(codevs 2218 错误答案)

    题目描述 Description 错误就是人们所说的Bug.用户在使用软件时总是希望其错误越少越好,最好是没有错误的.但是推出一个没有错误的软件几乎不可能,所以很多软件公司都在疯狂地发放补丁(有时这种 ...

  9. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

  10. WW_TRANS_I18N_LOCALE”与“WW_TRANS_I18N_LOCALE”属性

    Struts2 i18n国际化(允许用户自行选择语言)转最近在学习struts2,学习资料是李刚著的<struts2权威指南>,这本书写得非常好,非常有学习价值.我在学习过程中,自己跟着做 ...