uploaddialog.js

EXTJS做的网络硬盘系统..........

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

UploadDialog = Ext.extend(Ext.Window, {
	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({
			region : 'north',
			height : 65,
			baseCls : '',
			collapseMode:'mini',
			split : true,
			border : false
		});
		this.progressBar = new Ext.ProgressBar({text:'等待中 0 %'});
		var autoExpandColumnId = Ext.id('fileName');
		this.fileList = new Ext.grid.GridPanel({
			//region : 'center',
			border : false,
			enableColumnMove : false,
			enableHdMenu : false,
			columns : [new Ext.grid.RowNumberer(),
		        {header: '文件名',width : 100,dataIndex : 'fileName',sortable:false,fixed : true,renderer : this.formatFileName,id : autoExpandColumnId},
		        {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 : 28,
		        	dataIndex : 'fileState',
		        	renderer : this.formatState,
		        	sortable:false,
		        	fixed : true,
		        	align:'center'
		        }
			],
			autoExpandColumn : autoExpandColumnId,
			ds : new Ext.data.SimpleStore({fields: ['fileId','fileName', 'fileSize','fileType','fileState']}),
			tbar : new Ext.Toolbar(),
			bbar : []
		});
		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.on('cellclick',function(grid, rowIndex, columnIndex, e){
			if(columnIndex == 5){
				var record = grid.getSelectionModel().getSelected();
				var fileId = record.data.fileId;
				var file = this.swfupload.getFile(fileId);
				if(file){
					if(file.filestatus != SWFUpload.FILE_STATUS.CANCELLED){
						this.swfupload.cancelUpload(fileId);
						if(record.data.fileState != SWFUpload.FILE_STATUS.CANCELLED){
							record.set('fileState',SWFUpload.FILE_STATUS.CANCELLED);
							record.commit();
							this.onCancelQueue(fileId);
						}
					}
				}
			}
		},this);
		this.fileList.on('render',function(){
			this.fileList.getBottomToolbar().add(this.progressBar);
			var tb = this.fileList.getTopToolbar();
			tb.add({
				text : '添加文件',
				iconCls : 'db-icn-add'
			});
			tb.add({
				text : '开始上传',
				iconCls : 'db-icn-upload_',
				//disabled : true,
				handler : this.startUpload,
				scope : this
			});
			tb.add({
				text : '停止上传',
				iconCls : 'db-icn-stop',
				handler : this.stopUpload,
				scope : this
			});
			tb.add({
				text : '取消队列',
				iconCls : 'db-icn-cross',
				handler : this.cancelQueue,
				scope : this
			});
			tb.add({
				text : '清空列表',
				iconCls : 'db-icn-trash',
				handler : this.clearList,
				scope : this
			});
			var em = this.fileList.getTopToolbar().items.first().el.child('em');
            var placeHolderId = Ext.id();
            em.setStyle({
                position: 'relative',
                display: 'block'
            });
            em.createChild({
                tag: 'div',
                id: placeHolderId
            });
			var settings = {
				upload_url : this.uploadUrl,
				post_params : Ext.isEmpty(this.postParams) ? {}:this.postParams,
				flash_url : Ext.isEmpty(this.flashUrl) ? 'http://www.swfupload.org/swfupload.swf' : this.flashUrl, 
				file_post_name : Ext.isEmpty(this.filePostName) ? 'myUpload' : this.filePostName,
				file_size_limit : Ext.isEmpty(this.fileSize) ? '100 MB' : this.fileSize,
				file_types : Ext.isEmpty(this.fileTypes) ? '*.*' : this.fileTypes,
				file_types_description : this.fileTypesDescription,
				use_query_string:true,
				debug : false,
				button_width : '73',
				button_height : '20',
				button_placeholder_id : placeHolderId,
				button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
				button_cursor : SWFUpload.CURSOR.HAND,
				custom_settings : {
					scope_handler : this
				},
				file_queued_handler : this.onFileQueued,
				file_queue_error_handler : this.onFileQueueError,
				file_dialog_complete_handler : this.onFileDialogComplete,
				upload_start_handler : this.onUploadStart,
				upload_progress_handler : this.onUploadProgress,
				upload_error_handler : this.onUploadError,
				upload_success_handler : this.onUploadSuccess,
				upload_complete_handler : this.onUploadComplete
			};
			this.swfupload = new SWFUpload(settings);
			this.swfupload.uploadStopped = false;
			Ext.get(this.swfupload.movieName).setStyle({
                position: 'absolute', 
                top: 0,
                left: -2
            });
            this.resizeProgressBar();
            this.on('resize', this.resizeProgressBar, this);
		},this);
		UploadDialog.superclass.constructor.call(this, Ext.applyIf(config || {},{
			title : '文件上传',
			closeAction : 'close',
			layout : 'border',
			iconCls : 'db-icn-upload-local',
			//modal : true,
			width : 500,
			height : 500,
			minWidth : 450,
			minHeight : 500,
			split : true,
			buttons : [{text : '关闭',handler : this.onClose,scope : this}],
			items : [this.uploadInfoPanel,{
				region : 'center',
				layout:'fit',
				margins : '0 -1 0 -1',
				items : [this.fileList]
			}]}
		));
	},
	resizeProgressBar: function() {
        this.progressBar.setWidth(this.el.getWidth() - 18);
    },
	startUpload : function() {
		if (this.swfupload) {
			this.swfupload.uploadStopped = false;
			var post_params = this.swfupload.settings.post_params;
			post_params.path = encodeURI(this.scope.currentPath + '\\');
			this.swfupload.setPostParams(post_params);
			this.swfupload.startUpload();
		}
	},
	stopUpload : function(){
		if (this.swfupload) {
			this.swfupload.uploadStopped = true;
			this.swfupload.stopUpload();
		}
	},
	cancelQueue : function() {
		if (this.swfupload) {
			this.swfupload.stopUpload();
			var stats = this.swfupload.getStats();
			while (stats.files_queued > 0) {
				this.swfupload.cancelUpload();
				stats = this.swfupload.getStats();
			}
			this.fileList.getStore().each(function(record){
				switch(record.data.fileState){
					case SWFUpload.FILE_STATUS.QUEUED:
					case SWFUpload.FILE_STATUS.IN_PROGRESS:
						record.set('fileState',SWFUpload.FILE_STATUS.CANCELLED);
						record.commit();
						this.onCancelQueue(record.data.fileId);
						break;
					default : 
						break;
				}
			},this);
		}
	},
	clearList : function() {
		var store = this.fileList.getStore();
		store.each(function(record){
			if(record.data.fileState != SWFUpload.FILE_STATUS.QUEUED && record.data.fileState != SWFUpload.FILE_STATUS.IN_PROGRESS){
				store.remove(record);
			}
		});
	},
	getProgressTemplate : function(){
		var tpl = new Ext.Template(
				'<table class="upload-progress-table"><tbody>',
				'<tr><td class="upload-progress-label"><nobr>已上传数:</nobr></td>',
				'<td class="upload-progress-value"><nobr>{filesUploaded} / {filesTotal}</nobr></td>',
				'<td class="upload-progress-label"><nobr>上传状态:</nobr></td>',
				'<td class="upload-progress-value"><nobr>{bytesUploaded} / {bytesTotal}</nobr></td></tr>',
				'<tr><td class="upload-progress-label"><nobr>已用时间:</nobr></td>',
				'<td class="upload-progress-value"><nobr>{timeElapsed}</nobr></td>',
				'<td class="upload-progress-label"><nobr>剩余时间:</nobr></td>',
				'<td class="upload-progress-value"><nobr>{timeLeft}</nobr></td></tr>',
				'<tr><td class="upload-progress-label"><nobr>当前速度:</nobr></td>',
				'<td class="upload-progress-value"><nobr>{speedLast}</nobr></td>',
				'<td class="upload-progress-label"><nobr>平均速度:</nobr></td>',
				'<td class="upload-progress-value"><nobr>{speedAverage}</nobr></td></tr>',
				'</tbody></table>');
		tpl.compile();