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的文档。
完毕~

评论

24 楼 shukuangren_javaeye 2012-10-11  

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"代码即可

23 楼 剑锋凛冽 2012-09-02  

UploadPanel.js文件中的
uploadProgress : function(file, bytesComplete, totalBytes){//处理进度条
console.log("完成百分比"+file.percentUploaded+"，当前速度"+file.currentSpeed/8/1024/1024+"MB/s");
console.log(SWFUpload.speed.formatBytes(bytesComplete));
执行到这里的时候SWFUpload.speed为undefined，获取传输字节值。怎么办？

22 楼 liujinwen0919 2012-08-21  

添加没反映，郁

zhangb00x 写道

点添加没反映，郁闷！

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

21 楼 jc2002 2012-07-11  

name327 写道

jc2002 写道

name327 写道

旋风小皮皮 写道

旋风小皮皮 写道

我把代码放到我的工程里面 点击添加文件没有反应，我就在添加文件按钮中加了handle:this.swfupload.selectFiles(); 可是 再点击按钮时 报错Exception calling flash function 'SelectFiles':
是什么原因呀？ 

哈哈 第二天解决了， 问题在按钮的render上面，解决办法如下：
我也遇到这个问题了 在 'afterrender' 中有一句话 
if(!em){//此处为IE9一下版本的兼容问题的临时解决办法，目前还是不支持IE6
  em=Ext.get("btnAdd-btnWrap");
}
如果浏览器是ie8 则应该替换为：
if (!em) {//Ie8
var el = this.getDockedItems()[0].getComponent(0).getEl(); //jujun el : Ext.Element
  em = el.child('table');
}
建议做以上判断前 先判断浏览器类型。

好长时间没弄这个啦， 谢谢你建议的方法，有时间试试。

我还是不行呢，Firefox可以，但是IE9就不行，会提示“无法获取属性“setStyle”的值”，问题出在Ext.get（this.swfupload.Name）这里值为Null，所以不能setStyle，我查过了，this.swfupload.Name是能取到值的，值为SWFUpload_0，但是却Ext.get不到，我的flash版本是10，有没有什么解决办法啊？急啊急啊！谢谢

没有呢， 我原来做的时候尝试修复过， 但是没有成功。extjs的dom的操作和jquery相差太远。。

唉！郁闷……都不知道为什么IE取不到！

20 楼 name327 2012-07-11  

jc2002 写道

name327 写道

旋风小皮皮 写道

旋风小皮皮 写道

我把代码放到我的工程里面 点击添加文件没有反应，我就在添加文件按钮中加了handle:this.swfupload.selectFiles(); 可是 再点击按钮时 报错Exception calling flash function 'SelectFiles':
是什么原因呀？ 

哈哈 第二天解决了， 问题在按钮的render上面，解决办法如下：
我也遇到这个问题了 在 'afterrender' 中有一句话 
if(!em){//此处为IE9一下版本的兼容问题的临时解决办法，目前还是不支持IE6
  em=Ext.get("btnAdd-btnWrap");
}
如果浏览器是ie8 则应该替换为：
if (!em) {//Ie8
var el = this.getDockedItems()[0].getComponent(0).getEl(); //jujun el : Ext.Element
  em = el.child('table');
}
建议做以上判断前 先判断浏览器类型。

好长时间没弄这个啦， 谢谢你建议的方法，有时间试试。

我还是不行呢，Firefox可以，但是IE9就不行，会提示“无法获取属性“setStyle”的值”，问题出在Ext.get（this.swfupload.Name）这里值为Null，所以不能setStyle，我查过了，this.swfupload.Name是能取到值的，值为SWFUpload_0，但是却Ext.get不到，我的flash版本是10，有没有什么解决办法啊？急啊急啊！谢谢

没有呢， 我原来做的时候尝试修复过， 但是没有成功。extjs的dom的操作和jquery相差太远。。

19 楼 jc2002 2012-07-11  

name327 写道

旋风小皮皮 写道

旋风小皮皮 写道

我把代码放到我的工程里面 点击添加文件没有反应，我就在添加文件按钮中加了handle:this.swfupload.selectFiles(); 可是 再点击按钮时 报错Exception calling flash function 'SelectFiles':
是什么原因呀？ 

哈哈 第二天解决了， 问题在按钮的render上面，解决办法如下：
我也遇到这个问题了 在 'afterrender' 中有一句话 
if(!em){//此处为IE9一下版本的兼容问题的临时解决办法，目前还是不支持IE6
  em=Ext.get("btnAdd-btnWrap");
}
如果浏览器是ie8 则应该替换为：
if (!em) {//Ie8
var el = this.getDockedItems()[0].getComponent(0).getEl(); //jujun el : Ext.Element
  em = el.child('table');
}
建议做以上判断前 先判断浏览器类型。

好长时间没弄这个啦， 谢谢你建议的方法，有时间试试。

我还是不行呢，Firefox可以，但是IE9就不行，会提示“无法获取属性“setStyle”的值”，问题出在Ext.get（this.swfupload.Name）这里值为Null，所以不能setStyle，我查过了，this.swfupload.Name是能取到值的，值为SWFUpload_0，但是却Ext.get不到，我的flash版本是10，有没有什么解决办法啊？急啊急啊！谢谢

18 楼 name327 2012-07-11  

旋风小皮皮 写道

旋风小皮皮 写道

我把代码放到我的工程里面 点击添加文件没有反应，我就在添加文件按钮中加了handle:this.swfupload.selectFiles(); 可是 再点击按钮时 报错Exception calling flash function 'SelectFiles':
是什么原因呀？ 

哈哈 第二天解决了， 问题在按钮的render上面，解决办法如下：
我也遇到这个问题了 在 'afterrender' 中有一句话 
if(!em){//此处为IE9一下版本的兼容问题的临时解决办法，目前还是不支持IE6
  em=Ext.get("btnAdd-btnWrap");
}
如果浏览器是ie8 则应该替换为：
if (!em) {//Ie8
var el = this.getDockedItems()[0].getComponent(0).getEl(); //jujun el : Ext.Element
  em = el.child('table');
}
建议做以上判断前 先判断浏览器类型。

好长时间没弄这个啦， 谢谢你建议的方法，有时间试试。

17 楼 旋风小皮皮 2012-07-10  

旋风小皮皮 写道

我把代码放到我的工程里面 点击添加文件没有反应，我就在添加文件按钮中加了handle:this.swfupload.selectFiles(); 可是 再点击按钮时 报错Exception calling flash function 'SelectFiles':
是什么原因呀？ 

哈哈 第二天解决了， 问题在按钮的render上面，解决办法如下：
我也遇到这个问题了 在 'afterrender' 中有一句话 
if(!em){//此处为IE9一下版本的兼容问题的临时解决办法，目前还是不支持IE6
  em=Ext.get("btnAdd-btnWrap");
}
如果浏览器是ie8 则应该替换为：
if (!em) {//Ie8
var el = this.getDockedItems()[0].getComponent(0).getEl(); //jujun el : Ext.Element
  em = el.child('table');
}
建议做以上判断前 先判断浏览器类型。

16 楼 旋风小皮皮 2012-07-09  

我把代码放到我的工程里面 点击添加文件没有反应，我就在添加文件按钮中加了handle:this.swfupload.selectFiles(); 可是 再点击按钮时 报错Exception calling flash function 'SelectFiles':
是什么原因呀？ 

15 楼 name327 2012-06-29  

liqiang2010 写道

请问这个可以上传2G以上的大文件吗?

没有测试。

14 楼 liqiang2010 2012-06-25  

请问这个可以上传2G以上的大文件吗?

13 楼 hbyscl 2012-06-15  

userSettings is undefined
swfupload.speed.js第38行，报这个错了。是什么问题啊？我用的是EXTJS4.1

12 楼 zhangb00x 2012-06-04  

点添加没反映，郁闷！

11 楼 name327 2012-05-03  

jc2002 写道

楼主，你好，能不能把你的后台代码也贴出来一下啊，我不知道怎么将文件上传至服务器，谢谢啦！或者你方便的话，也可以麻烦你发我邮箱，[e-mail]！万分感谢！

上传文件网上例子大把， 这个上传的  和后台是无关的。你找找吧。

10 楼 jc2002 2012-04-28  

楼主，你好，能不能把你的后台代码也贴出来一下啊，我不知道怎么将文件上传至服务器，谢谢啦！或者你方便的话，也可以麻烦你发我邮箱，[e-mail]！万分感谢！

9 楼 name327 2012-04-23  

wilsonchen 写道

楼主您好，请教一个问题：
swfupload文件应该放在项目的哪里呢？我是把它放在extjs的目录下，然后我的jsp页面是放在web-inf下，但当我点击新增文件的时候，老是提示我找不到swfupload.swf文件，这是怎么回事 呢？

放在webRoot 或者webContent目录下。根据使用的IDE定

8 楼 wilsonchen 2012-03-19  

楼主您好，请教一个问题：
swfupload文件应该放在项目的哪里呢？我是把它放在extjs的目录下，然后我的jsp页面是放在web-inf下，但当我点击新增文件的时候，老是提示我找不到swfupload.swf文件，这是怎么回事 呢？

7 楼 ijackson 2012-03-13  

在取消上传，关闭window的时候抱这个错：
SCRIPT5007: 无法获取属性“SetReturnValue”的值: 对象为 null 或未定义
LZ可曾遇到过？

6 楼 wurui130 2012-02-17  

在清空列表中  cancelQueue()  这个方法怎么没有呢？

5 楼 name327 2012-01-08  

macamis 写道

不錯用...推

另外請問一下如何全部上傳完觸發一個事件
是否有這個事件可以用.

你去看swfupload的文档， 它会触发什么事件 文档中有介绍的。