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文件上传问题总结的主要内容,如果未能解决你的问题,请参考以下文章

extjs常用技巧

Extjs文件上传进度

ExtJS 3 - 文件上传

extjs多文件上传的问题

Extjs文件上传使用json服务?

在 Extjs 3.0 中禁用文件上传字段