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:,
height: ,
items: [
{
xtype: 'filefield',
fieldLabel: '文件上传',
labelWidth: ,
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: ,
height: ,
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 > )
{
String fileName = fileList[].FileName;
//在ie浏览器下需要截取文件名称，因为获取的是上传文件的全路径,其他浏览器不需要截取
fileName = fileName.Substring(fileName.LastIndexOf("\\", StringComparison.Ordinal) + );
String uploadFilePath = context.Server.MapPath("/upload");
String fileSavePath = uploadFilePath + "\\" + fileName;
if (File.Exists(fileSavePath))
{
File.Delete(fileSavePath);
}
fileList[].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 > )
{
String fileName = fileList[].FileName;
//在ie浏览器下需要截取文件名称，因为获取的是上传文件的全路径,其他浏览器不需要截取
fileName = fileName.Substring(fileName.LastIndexOf("\\", StringComparison.Ordinal) + );
String uploadFilePath = context.Server.MapPath("/upload");
String fileSavePath = uploadFilePath + "\\" + fileName;
if (File.Exists(fileSavePath))
{
File.Delete(fileSavePath);
}
fileList[].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文件上传问题总结的更多相关文章
- PHP+ExtJS 文件上传示例
xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...
- 自定义ExtJS文件上传
日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...
- struts2+extjs文件上传完整实现(攻克了上传中的各种问题)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...
- ExtJs文件上传(Ext.ux.form.FileUploadField)
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /** * @cfg {String} buttonText The b ...
- extjs文件上传
EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar: 1.upload.js /* ...
- Extjs 文件上传
function fromExcel(){ var dxjgdm_sel = Ext.get("dxjgdm").getValue(); var dxjglx_sel = Ext. ...
- [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...
- extjs插件开发上传下载文件简单案例
前台,extjs,框架,mybatis,spring,springMVC,简单的文件上传下载案例. 必要的jar包,commons-fileupload-1.3.1.jar,commons-io-2. ...
- extjs实现简单的多文件上传（不借助任何插件）,以及包含处理上传大文件的错误的各种处理办法
在extjs的学习过程中,有遇到过有关多文件上传的问题,但是网上的大多数都是专门的去实现多文件上传而去做的组件之类的,没有特别简单的方式,于是小白便做了下面的内容,只是通过动态的去添加extjs的自带 ...
随机推荐
- Python反转
1切片 s="svdfbffdbdf" a=s[::-1] 2入栈出栈 入栈之后再出栈正好就是了 3reverse 这个函数是列表的....你要先把str转成list list-& ...
- 【校招面试 之 C/C++】第2题 函数模板、类模板、特化、偏特化
1.C++模板 说到C++模板特化与偏特化,就不得不简要的先说说C++中的模板.我们都知道,强类型的程序设计迫使我们为逻辑结构相同而具体数据类型不同的对象编写模式一致的代码,而无法抽取其中的共性,这样 ...
- 从RTTI谈C++的向下转型
转自:http://blog.chinaunix.net/uid-28541347-id-4251713.html 从RTTI谈C++的向下转型 1.什么是RTTI? RTTI 是“Runtime T ...
- 使用web页面实现oracle的安装和测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Mac 终端使用 - 加密 1. MD5 2.Base64
1.MD5 打开终端 输入 :echo -n "加密内容" |md5 md5加密网站https://md5jiami.51240.com/ md5解密网站http://www.cm ...
- c语言使用指针实现模拟java/c# string.concat字符串串联方法
#include <stdio.h> void _strcat(char *, const char *); int main(void) { char source[] ="V ...
- super限定，子类中系统查找变量的顺序：
示例代码如下: import static java.lang.System.*; //-父类: class BaseClass{ public int a=7; } //-子类: public cl ...
- mysql thread_cache 和 thread_pool 之间的关系
线程池是Mysql5.6的一个核心功能,对 于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导 致资源利用 ...
- FutureTask详解
1 基本概念 1.1 Callable与Future Runnable封装一个异步运行的任务,可以把它想象成为一个没有参数和返回值的异步方法.Callable与Runnable类似,但是有返回值.Ca ...
- 02 请求库之 selenium模块
selenium模块 一 介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动 ...