附件上传方案

onlydo

使用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}))