UAS2.0_DEV_TEST/ux/form/field/MFileField.js

/**
 * 多文件上传下载
 */
Ext.define('Ext.ux.form.field.MFileField', {
	extend: 'Ext.form.FieldSet',
	alias: 'widget.mfilefield',

	defaultBindProperty: 'value',
	
	isFormField:true,
	submitValue: true,

	
	columnWidth: 1,
	cls: 'multi-file-field',
	minHeight: 22,
	collapsible: true,

	layout:'column',

	files: [],

	initComponent: function() {
		var me = this;
		this.title = this.fieldLabel;

		this.files.length = 0;
		
		Ext.apply(me, {
			items: [{
				xtype: 'hidden',
				name: 'fileIds'
			}, {
				xtype: 'filefield',
				name: 'file',
				buttonText: '浏览文件(≤20MB)',
				buttonOnly: true,
				hideLabel: true,
				columnWidth: 1,
				float: 'left',
				buttonConfig:{
					cls:'x-filefield-button',
					style: {
						float: 'left',
						margin: '0 0 5px 0'
					}
				},
				createFileInput : function() {
					this.fileInputEl = this.button.el.createChild({
						name: this.getName(),
						cls: Ext.baseCSSPrefix + 'form-file-input',
						tag: 'input',
						type: 'file',
						multiple:'multiple',
						size: 1
					}).on('change', this.onFileChange, this);
				},
				listeners: {
					change: function(field){
						if(field.value){
							me.upload(field);
						}
					}
				}
			}, {
				xtype: 'form',
				layout: 'column',
				cls: 'form-file-tags',
				columnWidth: 1,
				bodyPadding:'0 0 5px 5px',
				items: [],
			}],
			listeners: {
				change: function() {
					console.log('field value change', arguments);
				}
			}
		});

		this.callParent(arguments);

		if(this.value || this.defalutValue) {
			me.initSetValue(this.value || this.defalutValue);
		}
	},

	initSetValue: function(v) {
		this.setValue(v, true);
	},

	setValue: function(v, init){
		var me = this,
			oldValue = me.getValue(),
			filesInfo,
			newValue;
		
		me.clearAll();
		me.getFilesInfo(v).then(function(res) {
			filesInfo = res.data;
			newValue = me.addFiles(filesInfo);

			me.items.items[0].setValue(newValue);

			if(!init) {
				me.publishState('value', newValue);
				me.fireEvent('change', this, newValue, oldValue);
			}
		});
	},

	getValue: function (){
		return this.items.items[0].value;
	},

	getValueField: function () {
        return this.items.items[0];
	},

	getFileForm: function() {
		return this.items.items[2];
	},
	
	isValid: function () {
        return this.getValueField().isValid();
    },

    isDirty: function () {
        return this.getValueField().isDirty();
	},
	
	setReadOnly: function (val) {
        var me = this,
        	items = me.items.items,
			fileIdsField = items[0],
			fileField = items[1];

		fileIdsField.setReadOnly(val);
        fileField.button.setDisabled(val);
    },

    resetOriginalValue: function() {
		this.getValueField().resetOriginalValue();
	},

	addFiles: function(fileInfos) {
		var me = this,
			items = me.items.items,
			value = me.getValue(),
			oldValue = value,
			newValue = value;

		Ext.Array.forEach(fileInfos, function(fileInfo) {
			if(!me.contains(fileInfo)) {
				newValue = (newValue || '') + fileInfo.id + ';';
				me.files.push(fileInfo);
				me.insertFileTag(fileInfo);
			}
		});

		return newValue;
		
	},

	addFile: function(fileInfo) {
		var me = this,
			items = me.items.items,
			value = me.getValue(),
			oldValue = value,
			newValue = value;
		
		if(!me.contains(fileInfo)) {
			newValue = (newValue || '') + fileInfo.id + ';';
			items[0].setValue(newValue);
			this.files.push(fileInfo);
			this.insertFileTag(fileInfo);
	
			this.publishState('value', newValue);
			this.fireEvent('change', this, newValue, oldValue);
		}
	},

	insertFileTag: function(fileInfo) {
		var me = this,
			fileForm = me.getFileForm(),
			id = fileInfo.id,
			name = fileInfo.name,
			path = fileInfo.path,
			size = fileInfo.size,
			fileText, fieldWidth, newFileTag;

		if(!id) {
			return;
		}
		fileText = name + "  (" + Ext.util.Format.fileSize(size) + ")";
		fieldWidth = Math.min((me.getStrLength(fileText) + 25) / 200, .8);

		newFileTag = Ext.create('Ext.ux.form.field.FileTag', {
			fileName: name,
			value: name,
			columnWidth: fieldWidth,
			readOnly: false,
			editable: false,
			filePath: path,
			fileSize: size,
			fileId: id,
			fieldStyle: 'background:#E0EEEE;'
		});
		fileForm.add(newFileTag);
	},

	/**
	 * 上传附件
	 */
	upload: function(fileField){
		var me = this;
		var fileEl = fileField.fileInputEl.dom;
		var fd = new FormData();
		fd.append('file', fileEl.files[0]);
		fd.append('folderId', 0);
		me.setLoading(true);
		Ext.Ajax.request({
			url: '/api/file/upload',//这里是填写需要跨域访问的URL
			cors: true,
			useDefaultXhrHeader: false,
			method: 'post',
			rawData: fd,
			headers: {
				// 'Access-Control-Allow-Origin': '*',
				// 'Authorization':  uas.util.State.get('session').token,
				//"Content-Type": 'multipart/form-data'  //文件上传的格式， 
				"Content-Type":null
			},
			success: function (response, opts) {
				me.setLoading(false);
				var res = Ext.decode(response.responseText);
				if(res.success){
					var data = res.data;
					me.addFile(data);
				}else{
					console.error('failure', res);
				}
			},
			failure: function (response, opts) {
				me.setLoading(false);
				console.error('failure', response);
			}
		});
	},

	getFilesInfo: function(value){
		var me = this;

		me.setLoading(true);
		return new Ext.Promise(function (resolve, reject) {
			Ext.Ajax.request({
				url : '/api/file/info',
				params: {
					ids:  value
				},
				method : 'GET',
				success: function (response, opts) {
					me.setLoading(false);
					var res = Ext.decode(response.responseText);
					if(res.success){
						resolve(res);
					}else{
						reject(res);
					}
				},
				failure: function (response, opts) {
					me.setLoading(false);
					reject(response);
				}
			});
		})
	},

	contains: function(fileInfo) {
		if(typeof fileInfo === 'string') { // 可能直接传id
			fileInfo = { id: fileInfo };
		}
		return !!Ext.Array.findBy(this.files, function(f) {
			return f.id === fileInfo.id;
		});
	},
	
	clearAll: function() {
		var oldValue = this.getValue();
		this.getFileForm().removeAll();
		this.items.items[0].value = '';
		this.files.length = 0;

		this.publishState('value', '');
		this.fireEvent('change', this, '', oldValue);
	},

	remove: function(fileInfo) {
		var value = this.getValue(),
			fileTags,
			foundFileTag,
			idx,
			newValue;
		if(typeof fileInfo === 'string') {
			fileInfo = { id: fileInfo };
		}

		fileTags = this.getFileForm().items.items;
		foundFileTag = fileTags.find(function(ft) {
			return ft.fileId === fileInfo.id;
		});
		idx = this.files.findIndex(function(f) {
			return f.id === fileInfo.id;
		});

		if(foundFileTag && idx > -1) {

			newValue = value.replace(fileInfo.id + ';', '');

			this.getFileForm().remove(foundFileTag);
			this.items.items[0].setValue(newValue);
			this.files.splice(idx, 1);
			
			this.publishState('value', newValue);
			this.fireEvent('change', this, newValue, value);
		}
	},

	getStrLength: function(str) {
		for (var len = str.length, c = 0, i = 0; i < len; i++) 
        	str.charCodeAt(i) < 27 || str.charCodeAt(i) > 126 ? c += 2 : c++;
        return c;
	},

	getModelData: function(includeEmptyText, isSubmitting) {
        var me = this,
            data = null;
        
        // Note that we need to check if this operation is being called from a Submit action because displayfields aren't 
        // to be submitted,  but they can call this to get their model data. 
        if (!me.disabled && (me.submitValue || !isSubmitting)) {
            data = {};
            data[me.getFieldIdentifier()] = me.getValue();
        }
        return data;
	},

	getSubmitData: function() {
        var me = this,
            data = null;
        if (!me.disabled && me.submitValue) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        return data;
    },
	
	getFieldIdentifier: function () {
        return this.isEditorComponent ? this.dataIndex : this.name;
	},
	
	getName: function() {
        return this.name;
    },

	// checkUploadAmount:function(form){
	// 	var files = form.getEl().down('input[type=file]').dom.files;
	// 	var amounts = 0;
	// 	for (var i = 0; i < files.length; i++) {
	// 		amounts = amounts + files[i].size
	// 	}
	// 	if (amounts>104857600) {
	// 		Ext.MessageBox.alert("警告","对不起,上传文件总大小超过100m");
	// 		return false
	// 	}
	// 	return true;
	// },

	// checkFile:function(fileName){
	// 	var arr=['php','php2','php3', 'php5', 'phtml', 'asp', 'aspx', 'ascx', 'jsp', 'cfm', 'cfc', 'pl','pl','bat',  'dll', 'reg', 'cgi','war'];
	//     var suffix=fileName.substring(fileName.lastIndexOf(".")+1);
	//     return Ext.Array.contains(arr,suffix);
	// },
});