天天看点

extjs 限制上传文件类型_Extjs文件上传问题总结

本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间。现将问题及解决办法发出来,供有相同烦恼的博园参考。只是我第一次发文,如有不妥,望各位海涵。

问题描述:在文件上传的时候,在ie浏览器下,文件上传成功以后返回response时,回调函数直接报错:无法调用null或者空值的success属性。

首先看下extjs的代码:

width:400,

height:100,

items: [

{

xtype:'filefield',

fieldLabel:'文件上传',

labelWidth:80,

msgTarget:'side',

allowBlank:false,

margin:'10,10,10,10',

anchor:'100%',

buttonText:'选择文件'}],

buttons:[

{

text:'上传',

handler: function() {

uploadForm.getForm().submit({

url:'ExtFormSubmitAjax.ashx',params: {

action:'UploadFile'},

success: function(form, action) {var jsonResult =Ext.JSON.decode(action.response.responseText);if(jsonResult.success) {

}

Ext.Msg.alert('提示', jsonResult.Msg);

}

});

}

}, {

text:'取消',

handler: function() {

}

}],

buttonAlign:'center'});var mainPanel = Ext.create('Ext.panel.Panel', {

renderTo:'layoutDiv',

width:400,

height:150,

margin:'50,50,50,50',

items: [uploadForm]

});

});

这就是一个简单的文件上传的Extjs代码,由于测试,写的有些凌乱。当点击上传后,调用后台的文件上传代码:

public voidUploadFile(HttpContext context)

{try{

HttpFileCollection fileList=context.Request.Files;if (fileList.Count > 0)

{

String fileName= fileList[0].FileName;//在ie浏览器下需要截取文件名称,因为获取的是上传文件的全路径,其他浏览器不需要截取

fileName = fileName.Substring(fileName.LastIndexOf("\\", StringComparison.Ordinal) + 1);

String uploadFilePath= context.Server.MapPath("/upload");

String fileSavePath= uploadFilePath + "\\" +fileName;if(File.Exists(fileSavePath))

{

File.Delete(fileSavePath);

}

fileList[0].SaveAs(fileSavePath);

context.Response.Write("{success:true,Msg:\"文件上传成功\"}");

}else{

context.Response.Write("{success:false,Msg:\"请选择一个需要上传的文件\"}");

}

}catch(Exception)

{

}

}

按理说这样就可以完成文件上传的操作,但是,我的程序在ie上运行,就是报错。一直提示在ext-all-debug.js中的这里报错:

onSuccess: function(response) {

var form = this.form,

success = true,

result = this.processResponse(response);

if (result !== true && !result.success) {if(result.errors) {

form.markInvalid(result.errors);

}

this.failureType =Ext.form.action.Action.SERVER_INVALID;

success = false;

}

form.afterAction(this, success);

},

提示result为null,无法调用空值的success属性。其实原因就是返回的response对象种的responseText的值被ie自动添加了一个

标签所致。      

导致在 this.processResponse(response)时,没有办法将一个字符串解析成json格式,所以ext-all-debug.js的源码中就会报错。

要声明的是,这段代码在谷歌、火狐等其他浏览器中没有问题,我相信在一部分的ie中也没有问题,可能碰到高版本ie才会出现这样的奇葩问题。

其实知道了问题的所在,解决办法就相对简单了。我们只要在后台代码返回json的时候,为response对象设置一个contentType属性就可以了,代码如下:

public voidUploadFile(HttpContext context)

{try{

HttpFileCollection fileList=context.Request.Files;if (fileList.Count > 0)

{

String fileName= fileList[0].FileName;//在ie浏览器下需要截取文件名称,因为获取的是上传文件的全路径,其他浏览器不需要截取

fileName = fileName.Substring(fileName.LastIndexOf("\\", StringComparison.Ordinal) + 1);

String uploadFilePath= context.Server.MapPath("/upload");

String fileSavePath= uploadFilePath + "\\" +fileName;if(File.Exists(fileSavePath))

{

File.Delete(fileSavePath);

}

fileList[0].SaveAs(fileSavePath);

context.Response.ContentType= "text/html";

context.Response.Write("{success:true,Msg:\"文件上传成功\"}");

}else{

context.Response.Write("{success:false,Msg:\"请选择一个需要上传的文件\"}");

}

}catch(Exception)

{

}

}

这样就可以了,ie下就可以原样输出response对象的响应信息。希望对 遇到相同问题的博员有所帮助,晚安各位