첨부 파일 업로드 방안

swfupload 를 사용 합 니 다.http://swfupload.googlecode.com

{
				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}))