ext3 swf组件模式实现多选文件上传

ext3自带的fileuploadfield打开的文件选择窗口只能选择一个文件，实现简单的上传。在项目开发中，更多的还是会要求能同时选择多个文件。在接下来的内容将附上本人项目中用到的通过swfupload上传组件实现多选上传。

前台使用自定义控件uploadpanel，里边的内容可以根据用户需要自行修改。

new Ext.Window({
	title: '导入模板',
	width : 700,
	height : 350,
	layout: 'fit',
	closeAction: 'hide',
	constrain: true,
	bodyStyle: 'padding: 5px',
	modal: true,
	resizable: true,
	buttonAlign: 'center',
	items: [{
		xtype: 'uploadpanel',
		uploadUrl: importTemplateUrl, // 后台处理url
		filePostName: 'swfUploadFile',
		flashUrl: 'swf/swfupload.swf', // 本地最好下载swfupload.swf文件，上传组件swfupload.swf存放目录
		fileSize : '200MB',
		border : false,
		fileTypes : '*.exp', // 在这里限制文件类型:'*.exp
		fileTypesDescription : 'exp文件',
		postParams: {
			postType: 1
		}
	}],
	listeners: { 
		'hide': function() {
			
			// 将导入模板画面的数据也清空getProgressTemplate，导入文件的表格数据
			var uploadPanel = this.findByType('uploadpanel')[0];
			uploadPanel.resetProgressTemplate();
			uploadPanel.fileList.getStore().removeAll();
			uploadPanel.fileList.getStore().removeAll();
			uploadPanel.progressInfo.filesTotal = 0;
			uploadPanel.progressInfo.bytesTotal = 0;
		}
	}
});

后台根据当前使用的项目各自的封装进行接收，本人的项目是使用strut接收的，根据前台定义的filePostName: 'swfUploadFile',后台对应setter getter获取，得到FormFile对象，实现上传。

接着附上自定义控件uploadpanel的定义：

Date.prototype.getElapsed = function(A) {
	return Math.abs((A || new Date()).getTime() - this.getTime())
};

UploadPanel = Ext.extend(Ext.Panel, {
	fileList : null,
	swfupload : null,
	progressBar : null,
	progressInfo : null,
	uploadInfoPanel : null,
	constructor : function(config) {
		this.progressInfo = {
			filesTotal : 0,
			filesUploaded : 0,
			bytesTotal : 0,
			bytesUploaded : 0,
			currentCompleteBytes : 0,
			lastBytes : 0,
			lastElapsed : 1,
			lastUpdate : null,
			timeElapsed : 1
		};
		this.uploadInfoPanel = new Ext.Panel({
			hidden: 'true',
			region : 'north',
			height : 60,
			baseCls : '',
			collapseMode : 'mini',
			split : true,
			border : false
		});
		this.progressBar = new Ext.ProgressBar({
			text : '等待中 0 %',
			animate : true
		});
		var autoExpandColumnId = Ext.id('msg');
		this.uploadInfoPanel.on('render', function() {
			this.getProgressTemplate().overwrite(this.uploadInfoPanel.body, {
				filesUploaded : 0,
				filesTotal : 0,
				bytesUploaded : '0 bytes',
				bytesTotal : '0 bytes',
				timeElapsed : '00:00:00',
				timeLeft : '00:00:00',
				speedLast : '0 bytes/s',
				speedAverage : '0 bytes/s'
			});
		}, this);
		this.fileList = new Ext.grid.GridPanel({
			border : false,
			enableColumnMove : false,
			enableHdMenu : false,
			columns : [new Ext.grid.RowNumberer(), {
				header : '文件名',
				width : 100,
				dataIndex : 'fileName',
				sortable : false,
				fixed : true,
				renderer : this.formatFileName
			}, {
				header : '大小',
				width : 80,
				dataIndex : 'fileSize',
				sortable : false,
				fixed : true,
				renderer : this.formatFileSize,
				align : 'right'
			}, {
				header : '类型',
				width : 60,
				dataIndex : 'fileType',
				sortable : false,
				fixed : true,
				renderer : this.formatIcon,
				align : 'center'
			}, {
				header : '进度',
				width : 100,
				dataIndex : '',
				sortable : false,
				fixed : true,
				renderer : this.formatProgressBar,
				align : 'center'
			}, {
				header : '状态',
				width : 35,
				dataIndex : 'fileState',
				renderer : this.formatState,
				sortable : false,
				fixed : true,
				align : 'center'
			}, {
				header : ' ',
				width : 28,
				dataIndex : 'msg',
				renderer : this.columnTooltip,
				sortable : false,
				fixed : true,
				align : 'left',	
				id : autoExpandColumnId
			}],
			autoExpandColumn : autoExpandColumnId,
			ds : new Ext.data.SimpleStore({
				fields : ['fileId', 'fileName', 'fileSize', 'fileType', 'fileState', 'msg']
			}),
			//bbar : [this.progressBar],
			tbar : [{
				text : '添加文件',
				iconCls : 'db-icn-add'
			}, {
				text : '开始导入',
				iconCls : 'db-icn-upload_',
				handler : function(){
					this.startUpload();
				},
				scope : this
			},'-', {
				text : '停止导入',
				iconCls : 'db-icn-stop',
				ha