关于Extjs MVC模式上传文件的简单方式

　　Extjs新手研究上传文件的事情估计是件很头痛的问题，毕竟，我就在头痛。最近两天一直在忙文件上传问题，终于小有收获。

　　用的是Extjs+MVC3.0+EF开发，语言为C#。前台window代码显示列内容

  }, {
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: iJobRequirement.iAttachment,
                                name: 'AttachmentPath',
                                readOnly: true,
                                id: '附件',
                                value: edit ? cfg.record.get("AttachmentPath") : null,
                                labelWidth: 110,
                                 440,
                                margin: '0 0 0 0 '
                            }, {
                                xtype: 'button',
                                text: iGeneral.iAdd,
                                iconCls: 'add',
                                 60,
                                handler: function (btn) {
                                    var form = btn.up('jobReqWindow').down('form').getForm();
                                    var sId = form.findField('AttachmentPath').id;
                                    Ext.create('FileUploadWindow', {
                                        title: iGeneral.iUpload,
                                        sId: sId
                                    }).show()
                                }
                            }]
                        }, {

这是在jobReqWindow这个窗体中的一行，当我点击attachment旁边的button按钮后会打开一个名字为FileUploadWindow，代码如下：

/**
*description 定义文件上传组件
*author  马海涛
*date  2013-12-30
*/
Ext.define('FileUploadWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.fileUploadWindow',
    constructor: function (cfg) {
        var sId = cfg.sId;
        FileUploadWindow.superclass.constructor.call(this, Ext.apply({
             450,
            //title: cfg.title,
            closable: true,                  //含关闭按钮
            resizable: false,
            modal: true,
            bodyPadding: 10,
            frame: true,
            items: [{
                xtype: 'form',
                name: 'winform',
                frame: true,
                border: 0,
                padding: '0',
                items: [{
                    xtype: 'filefield',
                    name: 'file',
                    id: 'fileUpload',
                    margin: '1 0 0 0',
                     420,
                    fieldLabel: 'File',
                    labelWidth: 30,
                    buttonConfig: {
                         130,
                        iconCls: 'upload'
                    },
                    readOnly: true,
                    anchor: '100%',
                    buttonText: iUploadFile.iFileNote
                }]
            }],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: [{
                    xtype: 'component', flex: 1
                }, {
                    xtype: 'button',
                    text: iGeneral.iUpload,
                     55,
                    handler: function (btn) {
                        var form = btn.up('fileUploadWindow').down('form').getForm();
                        form.checkValidity();
                        if (form.isValid()) {
                            form.submit({
                                url: '../QuestionReq/UploadQuestionReq',
                                waitMsg: iUploadFile.iUploading,
                                success: function (fp, o) {
                                    Ext.Msg.Show(iUploadFile.iFile + o.result.message + iUploadFile.iUploadSuccessfully, iGeneral.iNote);
                                    btn.up('fileUploadWindow').close();
                                    Ext.getCmp(sId).setValue(o.result.file);
                                },
                                failure: function (fp, o) {
                                    Ext.Msg.Show(iUploadFile.iUploadFailed, iGeneral.iNote);
                                    btn.up('fileUploadWindow').close();
                                }
                            });
                        }
                    }
                }, {
                    xtype: 'button',
                    text: iGeneral.iCancel,
                    iconCls: 'delete',
                    handler: function (btn) { btn.up('fileUploadWindow').close(); }
                }]
            }
        }, cfg));
    }
});

这是常见的文件上传写法，用的是表单提交的方式。我用Ajax上传文件没有做成功，网上一些人说文件上传貌似不可以用Ajax，只能用表单。主要代码为

var form = btn.up('fileUploadWindow').down('form').getForm();
                        form.checkValidity();
                        if (form.isValid()) {
                            form.submit({
                                url: '../QuestionReq/UploadQuestionReq',
                                waitMsg: iUploadFile.iUploading,
                                success: function (fp, o) {
                                    Ext.Msg.Show(iUploadFile.iFile + o.result.message + iUploadFile.iUploadSuccessfully, iGeneral.iNote);
                                    btn.up('fileUploadWindow').close();
                                    Ext.getCmp(sId).setValue(o.result.file);
                                },
                                failure: function (fp, o) {
                                    Ext.Msg.Show(iUploadFile.iUploadFailed, iGeneral.iNote);
                                    btn.up('fileUploadWindow').close();
                                }
                            });
                        }
                    }

 Ext.getCmp(sId).setValue(o.result.file);将文件名称返回到attachment这个textfield控件上，这样用户体验性更好。

后台处理代码如下：

   /// <summary>
        /// 上传文件
        /// </summary>
        /// <returns></returns>
        public void UploadQuestionReq()
        {
            try
            {
                HttpRequest request = System.Web.HttpContext.Current.Request;
                HttpPostedFile myPostedFile = request.Files[0];//由于HttpPostedFile才是真正包含文件内容的类，因此再上传文件时将HttpPostedFileBase
                string fileName = myPostedFile.FileName;        //改为HttpPostedFile
                string fileNameExtension = Path.GetExtension(fileName);
                if (fileName.LastIndexOf("\") > -1) //为了解决谷歌和IE不兼容的现象，不过好像没有什么作用
                {
                    fileName = fileName.Substring(fileName.LastIndexOf("\") + 1);
                }
                if (myPostedFile.ContentLength > 0 && !string.IsNullOrEmpty(fileName))
                {
                    string savePath = ConfigurationManager.AppSettings["fileUploadPath"];
                    if (System.IO.Directory.Exists(Server.MapPath(savePath)) == false)
                    {
                        System.IO.Directory.CreateDirectory(Server.MapPath(savePath));
                    }
                    myPostedFile.SaveAs(Server.MapPath(savePath + Path.GetFileName(fileName)));
                    Response.Write("{success:true,message:'" + fileName + "',file:'" + Path.GetFileName(fileName) + "'}");
                }
                else
                {
                    Response.Write("{success:false}");
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

图片为：