附件上传方案

使用swfupload.http://swfupload.googlecode.com

<script type="text/javascript" src="http://localhost/extjs/ux/SwfUploadPanel.js"></script>
<script type="text/javascript" src="http://localhost/extjs/ux/swfupload.js"></script>

{
				id :'uploads',				
				xtype :'uploadDisplayField',
				isFormField: true,
				fieldLabel : '附件'
			}

按钮事件动作如下：
var win = new Ext.Window( {
			title:'附件上传',
			height: 300,
			width : 420,			
			plain : true,
			modal : true,
			shadow : true,
			border : false,						
			layout:'fit',
			items : [new Ext.ux.SwfUploadPanel({		        
		        frame: true,
		        //border: false,		        
		        flash_url:Ext.STATIC_URL+'extjs/ux/swfupload.swf',
				post_params : {
		                    'infoId': this.fp.form.findField('ID').getValue()
		                },
		        upload_url : Ext.WEB_URL+'admin/info/uploadAttachment.do',
		        listeners: {
		            fileUploadSuccess:function(panel,file,data){		                
		                Ext.getCmp('uploads').addFile(data.id,data.name);		                		                
		            },
		            scope:this
	            }
		    })]
		});
		win.show();

swfupload只是完成附件的上传功能。通常还要在表单中添加附件的列表展示，添加附件删除功能。

Ext.ux.UploadDisplayField = Ext.extend(Ext.Component, {
    autoEl: {
        tag: 'div'
    },
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        Ext.ux.UploadDisplayField.superclass.onRender.apply(this, arguments);
        this.el.on('load', this.onLoad, this);
    },    
    onLoad: function() {
        this.fireEvent('load', this);
    },    
    addFile: function(id,name) {    	   	
    	var html = '<tpl for="."><span id="{ID}"><a href="#">{NAME}</a> <a href="#" class="file-delete" id="file-{ID}">删除</a> </tpl>';
		var tpl = new Ext.XTemplate(html);	
		tpl.overwrite(this.el,[{ID:id,NAME:name}]);
		this.getEl().on('click', function(e, t) {
		    e.stopEvent();		   
		    var id=t.id.substr(5);
		    Ext.Ajax.request( {
				url : Ext.WEB_URL+'admin/info/attachmentDelete.do',
				params : {
					'id' : id
				},
				method : 'POST',
				success : function(response) {
					var r = Ext.decode(response.responseText);
					if (!r.success)
						Ext.Msg.alert('提示信息',
								'数据删除失败，由以下原因所致：<br/>' + (r.msg ? r.msg
										: '未知原因'));
					else {
						var span = Ext.getDom(id);
						span.parentNode.removeChild(span);
					}
				},
				scope : this
			});
		}, null, {delegate: 'a.file-delete'});
    },
    loadFiles:function(data){
    	var html = '<tpl for="."><span id="{ID}"><a href="#">{NAME}</a> <a href="#" class="file-delete" id="file-{ID}">删除</a> </tpl>';
		var tpl = new Ext.XTemplate(html);		
		tpl.overwrite(this.el,data);
		this.getEl().on('click', function(e, t) {
		    e.stopEvent();		    
		    var id=t.id.substr(5);
		    Ext.Ajax.request( {
				url : Ext.WEB_URL+'admin/info/attachmentDelete.do',
				params : {
					'id' : id
				},
				method : 'POST',
				success : function(response) {
					var r = Ext.decode(response.responseText);
					if (!r.success)
						Ext.Msg.alert('提示信息',
								'数据删除失败，由以下原因所致：<br/>' + (r.msg ? r.msg
										: '未知原因'));
					else {
						var span = Ext.getDom(id);
						span.parentNode.removeChild(span);
					}
				},
				scope : this
			});
		}, null, {delegate: 'a.file-delete'});		
    }
});
Ext.reg('uploadDisplayField', Ext.ux.UploadDisplayField);

服务器端代码：

class UploadAttachment(webapp.RequestHandler):
    def get(self):
        self.post()
    def post(self):        
        self.response.headers['Content-Type'] = 'text/x-json;charset=UTF-8'        
        infoId = self.request.get('infoId')             
        fileName = self.request.get('Filename')
        data=self.request.get('Filedata')
        attachment = models.Attachment()
        attachment.ext=fileName[ - 3:]
        attachment.name=fileName[: - 4][:10]
        attachment.content=data
        attachment.info=infoId
        attachment.put()
        self.response.out.write(simplejson.dumps({'success':True,'id':str(attachment.key()),'name':attachment.name}))