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/

 

评论

84 楼 szkdsz 2012-02-24  

junju 写道

点击“添加文件” 没反映是什么问题？我已经安装了flash player，swfupload.swf的调用路径也修改了（我在我本地的Index。aspx页面调用swfupload。js文件的，路径就是相对于这个Index。aspx页面的路径）

83 楼 hysun 2012-02-16  

在ff中看不到发送第二次请求到后台呢、显示上传失败~~~这是怎么回事~~~
求解

82 楼 yz_looksun 2012-02-11  

java环境下Firefox浏览器不能解决session验证的问题,不知道大家有没有好的办法？

81 楼 junju 2011-12-09  

关闭页面会报错

80 楼 shirongzhu 2011-12-09  

相关样式和图片没有

79 楼 junju 2011-12-08  

extjs4.0不支持this.getTopToolbar().get(0).el.child('em');，怎么处理？请赐教啊，等。。。。。。。。。。。。。。

78 楼 junju 2011-12-08  

点击“添加文件” 没反映是什么问题？我已经安装了flash player，swfupload.swf的调用路径也修改了（我在我本地的Index。aspx页面调用swfupload。js文件的，路径就是相对于这个Index。aspx页面的路径）

77 楼 junju 2011-12-08  

问题总结：
1.在extjs4.0中没有reg方法，代码修改：
var keelUploadPanel=Ext.create('keel.UploadPanel',
{
    id: "uploadPanel1",
    xtype: 'uploadPanel',
    border: false,
    fileSize: 1024 * 550,//上传文件体积上限，单位MB
    //uploadUrl: 'uploadFiles.action',
    flashUrl: '../../uploader/swfupload.swf',//是相对于你调用SWFUpload.js文件页面的路径
    filePostName: 'file', //后台接收参数
    fileTypes: '*.*', //可上传文件类型
    postParams: { savePath: 'uploader\\'} //上传文件存放目录
});
Ext.onReady(function () {
    Ext.QuickTips.init();
    new Ext.Window({
        width: 650,
        title: '上传文件',
        height: 300,
        layout: 'fit',
        items: [keelUploadPanel]
    }).show();
});
2.要安装flash player

76 楼 FlyDream2011 2011-11-30  

请问后台代码如何实现，能提供一份吗？

75 楼 apiaoye 2011-11-30  

不会用呀= =~

74 楼 apiaoye 2011-11-30  

在ext4.x里面跑不起来 为啥子啊！

73 楼 saiarmuluo 2011-11-21  

首先感谢楼主的分享，做得不错~~~
提一个在测试中发现一个BUG，我在界面设置的限制上传大小是55M，但是我传一个1.5G左右的文件是提示的错误是
case -120 : tip('该文件大小为0，不能选择！');

版本用的是1.2的那个。

72 楼 zyy7567093 2011-11-16  

感谢楼主分享

71 楼 qiliannujian 2011-11-08  

哈哈  刚才解决了  谢了哥们儿

70 楼 qiliannujian 2011-11-08  

哥们儿  这组件很好很牛很强大  就是我想添加相关的事件  但是都失败了 能给点而建议么

69 楼 40579717 2011-08-08  

楼主你的代码有个地方我没看懂。就是关于添加附件的按钮，传参的问题，在我的项目中找不到swfupload.swf文件的路径，我不知道要怎么通过按键传参找到他，I是新手。@！ 谢谢回复。麻烦

68 楼 WithMemores 2011-07-22  

LZ能把ACTION代码发出来么 既需要.非常感谢

67 楼 小鑫。 2011-07-01  

我想下载这个附件,我在哪下载.?

66 楼 gssl 2011-05-24  

binge520 写道

可以限制文件个数吗啊 就是限制5个文件上传 或者是单个文件上传 有的时候希望是单个文件上传 这个功能能做到吗啊！

自己看uploadPanel.js文件 看看什么是SWFUpload 这个问题自己完全可以解决啊 楼主已经写的这么好的说 伸手党还这么嚣张。。。。

65 楼 binge520 2011-05-24  

可以限制文件个数吗啊 就是限制5个文件上传 或者是单个文件上传 有的时候希望是单个文件上传 这个功能能做到吗啊！