`
name327
  • 浏览: 165189 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

ExtJs4.0整合Swfupload上传组件

阅读更多
看了这位仁兄的发的博文,于是对swfupload整合extjs产生兴趣。
http://czpae86.iteye.com/blog/834123
这里先说下swfupload的特点
支持多文件上传,支持上传时,选文件进行文件类型限制,同样支持文件大小在选文件时限制。

这是swfupload的GoogleCode地址
http://code.google.com/p/swfupload/
废话不多说,直接上内容
这是组件图




这是上传过程图

在来个选文件的图


-------------------------------------------------------------------------
附件中的jsp是上传页面, 设置的内容在jsp中查看。
image是界面按键的图标文件, 通过icon属性指定的路径。
由于我的jsp页面有base标签, 所以image文件夹在项目根目录时候,按钮图标方可正常显示,如果要改变Image路径,请根据实际情况改变UploadPanel.js里面的button的icon属性为合适的值。
使用时候导入extjs所需要的js和css后。
在页面导入附件中的所有Js.
最后说下 , 这个东西 说好听点就是模仿别人的。嘿嘿~
刚学extjs不久,“模仿”的不好之处,请大家见谅,最好能指出来。
如果大家还想对这个组件根据自己需求更改,请参考上面的swfupload地址,去下载swfupload的文档。
完毕~
  • 大小: 27.3 KB
  • 大小: 37.3 KB
  • 大小: 62.8 KB
分享到:
评论
44 楼 Obama2016 2016-08-17  
 
43 楼 Obama2016 2016-08-17  
4.0导不进去啊,有大神在吗,能加个QQ吗?
42 楼 name327 2015-12-23  
wang_0056 写道
wanwanGGYY 写道
我使用Extjs4.2.1,点击添加文件没有任何反映,不知道楼主有没有办法解决


SWF引用路径不正确会这样

4年了,还是那么多人对EXTJS乐此不疲 
41 楼 wang_0056 2015-11-03  
wanwanGGYY 写道
我使用Extjs4.2.1,点击添加文件没有任何反映,不知道楼主有没有办法解决


SWF引用路径不正确会这样
40 楼 wang_0056 2015-11-03  
shukuangren_javaeye 写道
liujinwen0919 写道
添加没反映,郁
zhangb00x 写道
点添加没反映,郁闷!

this.swfupload 为空或为定义  这是为什么啊


各位兄弟,点击没反应的事情我也遇到了,最终就一行代码就搞定:
原来的代码在创建swf对象后对其进行了显示位置的设置:
Ext.get(this.swfupload.movieName).setStyle({
position : 'absolute',
left :"0px"
});
将代码修改为如下即可使用:
Ext.get(this.swfupload.movieName).setStyle({
position : 'absolute',
left :"0px",
top:"0px"
});
就添加了一行代码:top:"0px",原因我理解如下:
通过前面的button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,把这个flash设置为透明的了,并且是叠加在了那个btnAdd这个按钮上面,通过这种方式那么用户能够看到这个btnAdd按钮,但是实际上点击鼠标的时候却又是点击在这个flash上了,这样就触发了上传窗口的,这儿把left、top都设置为0,就是避免flash叠加在btnAdd按钮上的时候,叠加的位置不对,这样点击的时候没有点击到这个flash,也就看不到效果了(测试环境是ie7/firefox14),

另外如果想在btnAdd按钮中添加handler来调用selectFile() 来打开上传文件对话框,那么对flash10及以上的版本是有问题的:
Flash Player 10的安全机制更严格,类似打开文件上传的对话框的操作,一定需要用户交互才触发,如果用脚本触发,会报#2176的运行时错误。

所以我最终的解决方案还是发现添加上面那一行top:"0px"代码即可








我先前也没反应,不知道你们的SWF引用路径对不对
39 楼 caimingyi484 2014-08-07  
sfdsfsdfsdfdsfsfsd
38 楼 wanwanGGYY 2014-06-20  
我使用Extjs4.2.1,点击添加文件没有任何反映,不知道楼主有没有办法解决
37 楼 q786773109 2014-02-17  
在IE下面无法添加文件 以上的方法都尝试了 还是不行啊
36 楼 q786773109 2014-01-17  
您这个 没有后台的代码啊
能给一个后台的代码么?
35 楼 hwj385327450 2013-09-06  
你的后台是用什么写的啊
34 楼 name327 2013-08-29  
qiuyufeifei 写道
楼主,发现个问题,当一个吧UploadPanel加入到其他Panel或者window时,父窗口close时,Ext报错view.ownerCt is undefined  [dom.id] : null;

这个东西bug有点小多,我好长时间都没碰extjs。不能帮助你解决问题。。 sorry!
33 楼 qiuyufeifei 2013-08-20  
楼主,发现个问题,当一个吧UploadPanel加入到其他Panel或者window时,父窗口close时,Ext报错view.ownerCt is undefined  [dom.id] : null;
32 楼 name327 2013-08-07  
xinxiaolin 写道
楼主,能不能把整个例子的前后台代码发到我又想呀,谢谢!我邮箱:89593434@qq.com

demo代码已经搞不见。。。
31 楼 xinxiaolin 2013-07-29  
楼主,能不能把整个例子的前后台代码发到我又想呀,谢谢!我邮箱:89593434@qq.com
30 楼 xinxiaolin 2013-07-29  
楼主,能不能把整个例子的前后台代码发到我又想呀,谢谢!
29 楼 hxpjava1 2012-12-28  
上传成功但是提示-200错误?
28 楼 剑锋凛冽 2012-11-05  
qinshihuanglove 写道
有没有完整的例子。extjs4.0.谢谢。发邮箱。chen_lsh@126.com,谢谢。

同求910018691@qq.com
27 楼 qinshihuanglove 2012-11-05  
有没有完整的例子。extjs4.0.谢谢。发邮箱。chen_lsh@126.com,谢谢。
26 楼 qinshihuanglove 2012-11-02  
有没有完整的例子。
25 楼 tk_it_2012 2012-10-31  
我点击添加按钮没反应,什么情况?求解..

相关推荐

    EXTJS4.0视频教程配套代码

    第二十讲:extjs4.0的高级组件tree+grid整合案例补充 第二十一讲:extjs4.0的高级组件form上 第二十二讲:extjs4.0的高级组件form中 第二十三讲:extjs4.0的高级组件form下 第二十四讲:extjs4.0的高级组件form...

    extJs4.0 开发手册源码

    EXTJS4.0的核心特性包括组件化开发、数据绑定、可扩展性、丰富的UI组件和强大的布局管理。其组件化开发允许开发者将UI拆分为独立的、可重用的部件,提高了代码复用和模块化。数据绑定功能使得视图与模型之间的数据...

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    ExtJs4.0 手册中文版

    在《ExtJs4.0 手册中文版》中,你可以找到关于ExtJS 4.0的全面介绍和详细指南。这个手册涵盖了框架的基础知识,如MVC架构、组件系统、数据绑定以及事件处理机制。此外,它还深入讲解了如何使用各种组件,如GridPanel...

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

    EXTJS4.0视频教程 30集 下载地址

    ### EXTJS 4.0 视频教程 30集 ...综上所述,EXTJS 4.0不仅具备强大的功能和丰富的组件库,还拥有活跃的开发者社区和完善的文档支持。对于希望快速构建高质量Web应用的开发者来说,深入学习和掌握EXTJS是非常有益的。

    ExtJs4.0官方版本

    ExtJS 4.0提供了一套丰富的组件库,包括表格、面板、表单、树形结构等,所有组件都可以动态创建和修改。这使得开发者可以构建高度交互和可配置的用户界面。 4. Store管理 Store是ExtJS 4中处理数据的主要对象,它...

    EXTjs4.0学习文档

    EXTJS 4.0 提供了丰富的、非常漂亮的外观体验,成为众多界面层开发人员的追捧,更重要的是它核心的组件基本覆盖了我们构建富客户端的常用的组件以及各种功能,在统计方面做的也非常出色。 在 4.0 版本中,EXTJS ...

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序...以上内容覆盖了Extjs 4.0的基础知识到高级组件的应用,通过这些教程的学习,开发者能够全面掌握Extjs 4.0的核心技术和最佳实践。

    ExtJs4.0入门教程

    ExtJs4.0入门教程,详细介绍ExtJs4.0。

    extjs4.0技术

    **Extjs4.0** 是一款强大的企业级前端框架,它可以帮助开发者快速构建复杂的用户界面,并且提供了丰富的组件和功能。对于初学者来说,理解其核心概念和基础操作是非常重要的。 ##### 获取Extjs4.0 - **官方网站**:...

    extjs 4.0 日期时间控件

    在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架中的DateTime组件,这是一个用于在Web应用中输入和显示日期与时间的控件。 描述中提到了这个控件是经过修改的中文版本。原版可能是英文,但通过定制,...

    EXTJS4.0视频教程配套代码包含action类

    EXTJS4.0是一款强大的JavaScript框架,用于构建富客户端Web应用程序。这个视频教程配套代码主要涉及EXTJS4.0中的action类,这是EXTJS中处理服务器端交互的关键部分。在EXTJS中,action类通常指的是Ext.Ajax或Ext....

    Extjs4.0中文学习手册、入门详解

    ExtJS 4.0 是一个基于 JavaScript 的 Rich Internet Application(RIA)框架,提供了许多强大的功能,包括 UI 组件、数据绑定、事件处理等。 ExtJS 4.0 可以帮助开发者快速构建复杂的 Web 应用程序。 2. 环境搭建 ...

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    Extjs4.0基础学习指南

    一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    【标题】:“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术,并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的,提供...

    Extjs4.0开发包

    这个“Extjs4.0开发包”包含了开发人员需要的所有资源,包括库文件、示例和API文档,以便于理解和使用ExtJS 4.0。 首先,让我们深入了解ExtJS的核心概念。ExtJS基于MVC(Model-View-Controller)架构模式,这是一种...

    extjs 4.0 extjs

    在ExtJS 4.0中,新的布局管理器提供了更多的灵活性,使得组件布局更加直观。此外,图表组件也得到了大幅增强,支持更多类型的图表和自定义选项,使得数据可视化更加丰富。 表单处理也是4.0版本的一大亮点,新增了...

Global site tag (gtag.js) - Google Analytics