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: sId 23 }).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.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 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 /// <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 }
图片为: