Extjs文件上传问题总结
Posted 小岛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Extjs文件上传问题总结相关的知识，希望对你有一定的参考价值。
本来文件上传是一个简单而常用的功能，但是，由于刚刚接触extjs，对extjs中的控件及其使用方法并不熟悉，导致本来一个很快就可以搞定的文件上传问题，弄了将近两天的时间。现将问题及解决办法发出来，供有相同烦恼的博园参考。只是我第一次发文，如有不妥，望各位海涵。
问题描述：在文件上传的时候，在ie浏览器下，文件上传成功以后返回response时，回调函数直接报错：无法调用null或者空值的success属性。
首先看下extjs的代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Content/Extjs/resources/css/ext-all.css" rel="stylesheet" /> <script src="Content/Extjs/ext-all-debug.js" type="text/javascript"></script> <script src="Content/Extjs/ext-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function() { var uploadForm = Ext.create(‘Ext.form.Panel‘, { 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] }); }); </script> </head> <body> <div id="layoutDiv"></div> </body> </html>
这就是一个简单的文件上传的Extjs代码，由于测试，写的有些凌乱。当点击上传后，调用后台的文件上传代码：
public void UploadFile(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自动添加了一个<pre>标签所致。
导致在 this.processResponse(response)时，没有办法将一个字符串解析成json格式，所以ext-all-debug.js的源码中就会报错。
要声明的是，这段代码在谷歌、火狐等其他浏览器中没有问题，我相信在一部分的ie中也没有问题,可能碰到高版本ie才会出现这样的奇葩问题。
其实知道了问题的所在，解决办法就相对简单了。我们只要在后台代码返回json的时候，为response对象设置一个contentType属性就可以了，代码如下：
public void UploadFile(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对象的响应信息。希望对 遇到相同问题的博员有所帮助，晚安各位
以上是关于Extjs文件上传问题总结的主要内容，如果未能解决你的问题，请参考以下文章