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

ext3自带的fileuploadfield打开的文件选择窗口只能选择一个文件,实现简单的上传。在项目开发中,更多的还是会要求能同时选择多个文件。在接下来的内容将附上本人项目中用到的通过swfupload上传组件实现多选上传。前台使用自定义控件uploadpanel,里边的内容可以根据用户需要自行修改。new Ext.Window({ title: '导入模板', width : 70
摘要由CSDN通过智能技术生成

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值