Extjs3.3 + swfUpload2.2 实现多文件上传组件

【该上传组件已经停止更新，该上传组件已经在项目中使用。在使用过程中如果发现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

 

后台返回说明：

 

 

.add{
    background-image: url(images/add.gif) !important;
}
.up{
    background-image: url(images/up.gif) !important;
}

.delete{
    background-image: url(images/delete.gif) !important;
}
.delete2{
    background-image: url(images/delete2.gif) !important;
}

 

Ext.onReady(function(){
	Ext.QuickTips.init();
	new Ext.Window({
		width : 650,
		title : 'swfUpload demo',
		height : 300,
		layout : 'fit',
		items : [
			{
				xtype:'uploadPanel',
				border : false,
				fileSize : 1024*50,//限制文件大小
				uploadUrl : 'uploadFiles.action',
				flashUrl : 'swfupload.swf',
				filePostName : 'file', //后台接收参数
				fileTypes : '*.*',//可上传文件类型
				postParams : {savePath:'upload\\'} //上传文件存放目录
			}
		]
	}).show();
});

 

 

最新代码请下载附件！uploader_v1.2.rar

 

当然还有没有完善的地方，请大家自由发挥吧！

同时发表于Extjs官方网：http://www.sencha.com/forum/showthread.php?118058-UploadPanel(Extjs3.0-swfUpload)

 

转载请注明出处：http://czpae86.iteye.com/

 

评论

24 楼 czpae86 2010-12-10  

ootabc 写道

{text:'添加文件',iconCls:'add',ref:'../addBtn'},'-',
“添加文件”文件没有处理事件的？

你装的浏览器安装了flash插件没有？

23 楼 ootabc 2010-12-10  

{text:'添加文件',iconCls:'add',ref:'../addBtn'},'-',
“添加文件”文件没有处理事件的？

22 楼 ootabc 2010-12-10  

楼主，为什么我单击“添加文件”没有反应呀！

21 楼 czpae86 2010-12-09  

jia5286112 写道

fileTypes : '*.*', // 可上传文件类型
改为 *.jpg只能选择上传jpg，但如果还想让上传gif，怎么写 ？  LZ

多种类型：'*.jpg;*.gif'
中间用分号隔开

20 楼 jia5286112 2010-12-09  

sunnypjd 写道

这个会和Flash的版本有关系吗?

flash不都是10.1哈，你下载LZ的最新版。
火狐3.6 IE8我没问题，是不是你EXT 版本太老了

19 楼 sunnypjd 2010-12-09  

这个会和Flash的版本有关系吗?

18 楼 jia5286112 2010-12-09  

fileTypes : '*.*', // 可上传文件类型
改为 *.jpg只能选择上传jpg，但如果还想让上传gif，怎么写 ？  LZ

17 楼 czpae86 2010-12-09  

sunnypjd 写道

FF 3.6+ 报错.

Ext.get(this.swfupload.movieName).setStyle({
position : 'absolute',
top : 0,
left : -2
});

Ext.get(this.swfupload.movieName) 返回NULL. 不知道为什么.
LZ 帮忙看看?

我用firefox是3.6.12，没有出现该问题，
IE,GOOGLE浏览器也没有这个问题。

16 楼 jia5286112 2010-12-09  

czpae86 写道

jia5286112 写道

jia5286112 写道

我怎么上传完后报个错误。
状态应该显示上传成功，但100%了还是现实正在上传，火狐错误 syntax error 0。
大大，帮看下哈

是后台应该返回一个表示成功的值吧？返回值是什么？

你去下一个最新版本的，现在更新为1.2了

嗯，1.2问题已经解决了，好

15 楼 sunnypjd 2010-12-09  

FF 3.6+ 报错.

Ext.get(this.swfupload.movieName).setStyle({
position : 'absolute',
top : 0,
left : -2
});

Ext.get(this.swfupload.movieName) 返回NULL. 不知道为什么.
LZ 帮忙看看?

14 楼 itsxinsb 2010-12-09  

服务端是使用struts2吗？，服务端如何读取到文件大小（size）的?

13 楼 czpae86 2010-12-09  

jia5286112 写道

jia5286112 写道

我怎么上传完后报个错误。
状态应该显示上传成功，但100%了还是现实正在上传，火狐错误 syntax error 0。
大大，帮看下哈

是后台应该返回一个表示成功的值吧？返回值是什么？

你去下一个最新版本的，现在更新为1.2了

12 楼 jia5286112 2010-12-08  

jia5286112 写道

我怎么上传完后报个错误。
状态应该显示上传成功，但100%了还是现实正在上传，火狐错误 syntax error 0。
大大，帮看下哈

是后台应该返回一个表示成功的值吧？返回值是什么？

11 楼 jia5286112 2010-12-08  

我怎么上传完后报个错误。
状态应该显示上传成功，但100%了还是现实正在上传，火狐错误 syntax error 0。
大大，帮看下哈

10 楼 kenken0y 2010-12-08  

跟awesome uploadr有什么区别?
http://www.sencha.com/forum/showthread.php?103686-Awesome-Uploader-Drag-and-Drop-Swfupload-File-Field

9 楼 czpae86 2010-12-08  

181054867 写道

大家，ext-all.css、common.css这些文件哪去啦？

ext-all.css Extjs的包里面有，Exjs压缩包自己下最新的然后导入就可以了，
common.css文件不是必要的，所以没有发

8 楼 czpae86 2010-12-08  

jia5286112 写道

没有 common.css

这文件不是必要的，所以没有发

7 楼 jia5286112 2010-12-08  

没有 common.css

6 楼 181054867 2010-12-08  

大家，ext-all.css、common.css这些文件哪去啦？

5 楼 181054867 2010-12-07  

感谢分享，正在找关于swfUpload的例子！！