本来文件上传是一个简单而常用的功能，但是，由于刚刚接触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文件上传问题总结的更多相关文章

  1. PHP+ExtJS 文件上传示例

    xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...

  2. 自定义ExtJS文件上传

    日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...

  3. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  4. ExtJs文件上传(Ext.ux.form.FileUploadField)

    Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /**  * @cfg {String} buttonText The b ...

  5. extjs文件上传

    EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar:   1.upload.js /* ...

  6. Extjs 文件上传

    function fromExcel(){ var dxjgdm_sel = Ext.get("dxjgdm").getValue(); var dxjglx_sel = Ext. ...

  7. [转]ExtJs入门之filefield：文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  8. extjs插件开发上传下载文件简单案例

    前台,extjs,框架,mybatis,spring,springMVC,简单的文件上传下载案例. 必要的jar包,commons-fileupload-1.3.1.jar,commons-io-2. ...

  9. extjs实现简单的多文件上传（不借助任何插件）,以及包含处理上传大文件的错误的各种处理办法

    在extjs的学习过程中,有遇到过有关多文件上传的问题,但是网上的大多数都是专门的去实现多文件上传而去做的组件之类的,没有特别简单的方式,于是小白便做了下面的内容,只是通过动态的去添加extjs的自带 ...

随机推荐

  1. gcd，扩展欧几里得，中国剩余定理

    1.gcd: int gcd(int a,int b){ ?a:gcd(b,a%b); } 2.中国剩余定理: 题目:学生A依次给n个整数a[],学生B相应给n个正整数m[]且两两互素,老师提出问题: ...

  2. DOS批处理前言

    -----------made by siwuxie095 1.批处理(Batch):望文知义,对某对象进行批量处理,实际上是一种脚本 2.DOS(Disk Operating System-磁盘操作 ...

  3. 转）Ubuntu14安装wireshark进行抓包

    转自:http://jingyan.baidu.com/article/c74d60009d992f0f6a595de6.html 背景: ubuntu14.04/64位 为了抓包和分析包 安装过程: ...

  4. JAVA知识积累 JSP第一篇【JSP介绍、工作原理、生命周期、语法、指令、行为】

    什么是JSP JSP全名为Java Server Pages,java服务器页面.JSP是一种基于文本的程序,其特点就是HTML和Java代码共同存在! 为什么需要JSP JSP是为了简化Servle ...

  5. 53. Maximum Subarray最大求和子数组12 3（dp）

    ［抄题］: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  6. TextView 小技巧

    1.TextView的单行显示 最后空间不够的画变为省略号显示 textView中让结尾变为省略号android:ellipsize = "end" 省略号在结尾tv.setEll ...

  7. 粘性Service

    粘性Service就是一种服务 把他删去他又会马上创建 原理是在这个服务中去开启线程不断检测此服务是否存在如果不存在,咋就会重新创建 import android.app.Activity; impo ...

  8. Mysql、Oracle、SqlServer的JDBC连接实现和对比（提供驱动包）

    首先,我们需要准备数据库连接所需的jar包.目前mysql的驱动包可能比较好找,但是oracle和sqlserver的有很多,要找到能用的要花一点点心思,这里直接把下载地址和版本发送出来. Mysql ...

  9. LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”。

    错误原因: bool res1 = S_ROLE_MENU_PURVIEWCODE_Manage.Delete(c => c.MPC_CODE == strs[0]); linq不能写strs[ ...

  10. linux-centos6-rabbitmq安装及配置

    服务器版本centos6.8 一.先安装Erlang 具体安装哪个版本可以对照 http://www.rabbitmq.com/which-erlang.html 如下图: 准备安装RabbitMQ3 ...