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;
}
}
图片为：
