关于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,
                                 width: 440,
                                 margin: '0 0 0 0 '
                             }, {
                                 xtype: 'button',
                                 text: iGeneral.iAdd,
                                 iconCls: 'add',
                                 width: 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({
             width: 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',
                     width: 420,
                     fieldLabel: 'File',
                     labelWidth: 30,
                     buttonConfig: {
                         width: 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,
                     width: 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[];//由于HttpPostedFile才是真正包含文件内容的类，因此再上传文件时将HttpPostedFileBase
                 string fileName = myPostedFile.FileName;        //改为HttpPostedFile
                 string fileNameExtension = Path.GetExtension(fileName);
                 if (fileName.LastIndexOf("\\") > -) //为了解决谷歌和IE不兼容的现象，不过好像没有什么作用
                 {
                     fileName = fileName.Substring(fileName.LastIndexOf("\\") + );
                 }
                 if (myPostedFile.ContentLength >  && !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;
             }
         }

图片为：