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/

 

评论

64 楼 binge520 2011-05-24  

你上传的文件是不是实例 我能够直接拿来用吗啊

63 楼 gssl 2011-05-23  

gssl 写道

FF4上测试有界面bug 鼠标放在上传按钮那里添加文件按钮会变成响应状态 添加文件按钮要在上传按钮那里按才能起作用 原因分析:看了后台代码 是一个<button>接一个<object>标签而FF貌似没有把他们两个重叠起来 求解决。。。(button是添加文件按钮object应该flashscript生成的那个button)

这个问题我自己解决了 你的代码里面有bug 因为FF4不支持当position为absolute时left为负的~ 下载的人注意要把uploaderPanel.js这里的-2改为0~~

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

62 楼 gssl 2011-05-23  

FF4上测试有界面bug 鼠标放在上传按钮那里添加文件按钮会变成响应状态 添加文件按钮要在上传按钮那里按才能起作用 原因分析:看了后台代码 是一个<button>接一个<object>标签而FF貌似没有把他们两个重叠起来 求解决。。。(button是添加文件按钮object应该flashscript生成的那个button)

61 楼 czpae86 2011-05-17  

seyaa 写道

lz  你好 ！ 看了你的ext做的这个组件，但是本地不能运行，所有就看了下源码，并找了些 swfupload的例子和去官网看来看。但是仍然有点问题希望你请教你下：
就是 如果不我想在页面 像官网的demo那样给个span 去替换作为一个添加 文件的按钮。
我该如何 做

你可以参考我例子里面的,原理差不多~~

60 楼 seyaa 2011-05-17  

lz  你好 ！ 看了你的ext做的这个组件，但是本地不能运行，所有就看了下源码，并找了些 swfupload的例子和去官网看来看。但是仍然有点问题希望你请教你下：
就是 如果不我想在页面 像官网的demo那样给个span 去替换作为一个添加 文件的按钮。
我该如何 做

59 楼 lumiing 2011-05-15  

博主，请教怎么在上传之前拿到文件大小，谢谢

58 楼 wp16125 2011-04-22  

yanke813 写道

请问文件大小的提示函数你是不是忘记写了啊，另外，我发现设置的是50m实际只能上传2m是怎么回事儿呢？

你后台用的是struts2吗？struts2貌似默认上传上限是2M

57 楼 wp16125 2011-04-22  

我在用swfupload做上传的时候。在windows2000、2003中点击添加问价没有弹出窗口？但是XP可以正常使用，请问是什么问题



还真是没装flash player的原因

56 楼 bjyzxxds 2011-04-16  

这个还不错哦，最近开发 的功能能借鉴一下，谢谢分享

55 楼 xf326521 2011-04-14  

czpae86 写道

xf326521 写道

楼主在吗 我有些问题想问一下
首先上传后 它本身会发送一次请求 我不知道在哪里发送的
There is no Action mapped for namespace / and action name proj/my/. - [unknown location]

我的提交路径
uploadUrl : '<%=BasePath%>proj/my/myfile/uploadDfly.action',
这是一个问题

还有一个关闭窗体 再次打开 报错 ext-all.js报错
b.dom is undefined

第一个问题可能你struts配置不正确吧

呵呵 不是路径 问题我解决了我把空的请求过滤了  但是空请求 还是没明白怎么发送的
第二个是 我windows 没设置closeAction 把它设置hide 就不销毁了 我里面有全局变量 ：）

54 楼 czpae86 2011-04-11  

xf326521 写道

楼主在吗 我有些问题想问一下
首先上传后 它本身会发送一次请求 我不知道在哪里发送的
There is no Action mapped for namespace / and action name proj/my/. - [unknown location]

我的提交路径
uploadUrl : '<%=BasePath%>proj/my/myfile/uploadDfly.action',
这是一个问题

还有一个关闭窗体 再次打开 报错 ext-all.js报错
b.dom is undefined

第一个问题可能你struts配置不正确吧

53 楼 xf326521 2011-04-09  

楼主在吗 我有些问题想问一下
首先上传后 它本身会发送一次请求 我不知道在哪里发送的
There is no Action mapped for namespace / and action name proj/my/. - [unknown location]

我的提交路径
uploadUrl : '<%=BasePath%>proj/my/myfile/uploadDfly.action',
这是一个问题

还有一个关闭窗体 再次打开 报错 ext-all.js报错
b.dom is undefined

52 楼 tengmeiting 2011-04-07  

galenbao 写道

楼主你好。
最终实现上传的功能，是不是在这里实现的：uploadUrl : '/servlet/UploadServlet',
但是我点击上传后，界面虽然显示上传成功，我这个Servlet却没有执行，文件也并没有上传至upload文件夹下。
能否分享一下您的'uploadFiles.action'的代码。
由于第一次接触EXT和swfUpload，问的可能比较菜，请见谅。

您好？ 你可以添加上文件么？ 我的怎么添加不了文件呢！

51 楼 tengmeiting 2011-04-06  

czpae86 写道

ootabc 写道

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

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

我安装flash了  可是，点击“添加文件” 还是没反映啊！ 怎么回事呢？ 

50 楼 tengmeiting 2011-04-06  

楼主 为什么我点击“添加文件”弹不出来对话框呢？

49 楼 tengmeiting 2011-04-06  

为什么我上传文件总是报IO_ERROR错呢！

48 楼 wmj007 2011-03-16  

我在使用中在上传页面家了几个文本框，用户可以录入，但如果是中文的话传不过去，大家有遇到吗，如何解决呀？

47 楼 wmj007 2011-03-09  

这个组件还有一个bug就是单击上传按钮是没有做校验时候已选择了文件，这样会出错？

46 楼 wmj007 2011-03-09  

dananren428 写道

哥们，我确保没有改文件路径 flashUrl：'swfupload.swf',并且你给出的四个文件我也没有改变路径，直接复制放在我们的项目里面，我的火狐安装的flash插件是10.1 v102,但点击添加文件，没有对话框
这个upload_url 和 flash_url应该怎么写呢？官方的Demo我试了行，但是和Ext结合一下swfupload.swf总是找不到，为啥呢？可否给指导一下？

就是你的flashUrl：'swfupload.swf'这个路径不对，它是相对于.jsp文件的目录，不是相对那个js的目录

45 楼 tangluyou 2011-03-08  

怎么上传就是失败呢.
又不知道错误在什么地方,