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

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

1   }, { 2                             items: [{ 3                                 xtype: 'textfield', 4                                 fieldLabel: iJobRequirement.iAttachment, 5                                 name: 'AttachmentPath', 6                                 readOnly: true, 7                                 id: '附件', 8                                 value: edit ? cfg.record.get("AttachmentPath") : null, 9                                 labelWidth: 110,10                                 width: 440,11                                 margin: '0 0 0 0 '12                             }, {13                                 xtype: 'button',14                                 text: iGeneral.iAdd,15                                 iconCls: 'add',16                                 width: 60,17                                 handler: function (btn) {18                                     var form = btn.up('jobReqWindow').down('form').getForm();19                                     var sId = form.findField('AttachmentPath').id;20                                     Ext.create('FileUploadWindow', {21                                         title: iGeneral.iUpload,22                                         sId: sId23                                     }).show()24                                 }25                             }]26                         }, {

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

1 /** 2 *description 定义文件上传组件 3 *author  马海涛 4 *date  2013-12-30 5 */ 6 Ext.define('FileUploadWindow', { 7     extend: 'Ext.window.Window', 8     alias: 'widget.fileUploadWindow', 9     constructor: function (cfg) {10         var sId = cfg.sId;11         FileUploadWindow.superclass.constructor.call(this, Ext.apply({12             width: 450,13             //title: cfg.title,14             closable: true,                  //含关闭按钮15             resizable: false,16             modal: true,17             bodyPadding: 10,18             frame: true,19             items: [{20                 xtype: 'form',21                 name: 'winform',22                 frame: true,23                 border: 0,24                 padding: '0',25                 items: [{26                     xtype: 'filefield',27                     name: 'file',28                     id: 'fileUpload',29                     margin: '1 0 0 0',30                     width: 420,31                     fieldLabel: 'File',32                     labelWidth: 30,33                     buttonConfig: {34                         width: 130,35                         iconCls: 'upload'36                     },37                     readOnly: true,38                     anchor: '100%',39                     buttonText: iUploadFile.iFileNote40                 }]41             }],42             dockedItems: {43                 xtype: 'toolbar',44                 dock: 'bottom',45                 ui: 'footer',46                 items: [{47                     xtype: 'component', flex: 148                 }, {49                     xtype: 'button',50                     text: iGeneral.iUpload,51                     width: 55,52                     handler: function (btn) {53                         var form = btn.up('fileUploadWindow').down('form').getForm();54                         form.checkValidity();55                         if (form.isValid()) {56                             form.submit({57                                 url: '../QuestionReq/UploadQuestionReq',58                                 waitMsg: iUploadFile.iUploading,59                                 success: function (fp, o) {60                                     Ext.Msg.Show(iUploadFile.iFile + o.result.message + iUploadFile.iUploadSuccessfully, iGeneral.iNote);61                                     btn.up('fileUploadWindow').close();62                                     Ext.getCmp(sId).setValue(o.result.file);63                                 },64                                 failure: function (fp, o) {65                                     Ext.Msg.Show(iUploadFile.iUploadFailed, iGeneral.iNote);66                                     btn.up('fileUploadWindow').close();67                                 }68                             });69                         }70                     }71                 }, {72                     xtype: 'button',73                     text: iGeneral.iCancel,74                     iconCls: 'delete',75                     handler: function (btn) { btn.up('fileUploadWindow').close(); }76                 }]77             }78         }, cfg));79     }80 });

这是常见的文件上传写法，用的是表单提交的方式。我用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控件上，这样用户体验性更好。

后台处理代码如下：

1    /// 
 2         /// 上传文件 3         /// 
 4         /// 
       5         public void UploadQuestionReq() 6         { 7             try 8             { 9                 HttpRequest request = System.Web.HttpContext.Current.Request;10                 HttpPostedFile myPostedFile = request.Files[0];//由于HttpPostedFile才是真正包含文件内容的类，因此再上传文件时将HttpPostedFileBase11                 string fileName = myPostedFile.FileName;        //改为HttpPostedFile12                 string fileNameExtension = Path.GetExtension(fileName);13                 if (fileName.LastIndexOf("\\") > -1) //为了解决谷歌和IE不兼容的现象，不过好像没有什么作用14                 {15                     fileName = fileName.Substring(fileName.LastIndexOf("\\") + 1);16                 }17                 if (myPostedFile.ContentLength > 0 && !string.IsNullOrEmpty(fileName))18                 {19                     string savePath = ConfigurationManager.AppSettings["fileUploadPath"];20                     if (System.IO.Directory.Exists(Server.MapPath(savePath)) == false)21                     {22                         System.IO.Directory.CreateDirectory(Server.MapPath(savePath));23                     }24                     myPostedFile.SaveAs(Server.MapPath(savePath + Path.GetFileName(fileName)));25                     Response.Write("{success:true,message:'" + fileName + "',file:'" + Path.GetFileName(fileName) + "'}");26                 }27                 else28                 {29                     Response.Write("{success:false}");30                 }31             }32             catch (Exception ex)33             {34                 throw ex;35             }36         }

图片为：