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

　　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                                  440,
11                                 margin: '0 0 0 0 '
12                             }, {
13                                 xtype: 'button',
14                                 text: iGeneral.iAdd,
15                                 iconCls: 'add',
16                                  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: sId
23                                     }).show()
24                                 }
25                             }]
26                         }, {

View Code

这是在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              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                      420,
31                     fieldLabel: 'File',
32                     labelWidth: 30,
33                     buttonConfig: {
34                          130,
35                         iconCls: 'upload'
36                     },
37                     readOnly: true,
38                     anchor: '100%',
39                     buttonText: iUploadFile.iFileNote
40                 }]
41             }],
42             dockedItems: {
43                 xtype: 'toolbar',
44                 dock: 'bottom',
45                 ui: 'footer',
46                 items: [{
47                     xtype: 'component', flex: 1
48                 }, {
49                     xtype: 'button',
50                     text: iGeneral.iUpload,
51                      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 });

View Code

这是常见的文件上传写法，用的是表单提交的方式。我用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();
                                }
                            });
                        }
                    }

View Code

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

后台处理代码如下：

 1    /// <summary>
 2         /// 上传文件
 3         /// </summary>
 4         /// <returns></returns>
 5         public void UploadQuestionReq()
 6         {
 7             try
 8             {
 9                 HttpRequest request = System.Web.HttpContext.Current.Request;
10                 HttpPostedFile myPostedFile = request.Files[0];//由于HttpPostedFile才是真正包含文件内容的类，因此再上传文件时将HttpPostedFileBase
11                 string fileName = myPostedFile.FileName;        //改为HttpPostedFile
12                 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                 else
28                 {
29                     Response.Write("{success:false}");
30                 }
31             }
32             catch (Exception ex)
33             {
34                 throw ex;
35             }
36         }

View Code

图片为：