EXTJS Fileupload - IE8安全栏问题

时间:2010-12-17 15:21:46

标签: javascript ajax internet-explorer file-upload extjs

我正在尝试使用EXTJS应用程序发送带附件的电子邮件。所以我有一个非常基本的表单,包括主题的文本字段,另一个带有inputType的文本字段:附件的'file'和一个html编辑器。

var panel = new Ext.form.FormPanel({
    fileUpload:true,
    labelAlign: 'right',        
    monitorValid: true,
    border: false,
    bodyBorder: false,       
    defaults:{
        anchor: '100%',
        labelStyle: 'font-weight:bold;'
    },
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'SUBJECT',
            name: 'subject',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            fieldLabel: 'ATTACHMENT',
            name: 'file_to_upload',
            anchor: '80%',
            itemCls: 'attachment-field',
            allowBlank: true,
            inputType:'file'
        },
        {
            xtype: 'htmleditor',
            fieldLabel:'MESSAGE',
            name:'msg'
        }
    ]
});

此表单放在一个窗口中,该窗口将提交给服务器:

var window = new Ext.Window({
    title: 'Compose a message',
    height: 600,
    width: 800,
    autoScroll: true,
    border: false,
    bodyBorder: false,        
    items: panel,
    buttons:[
        {
            text: 'Send',
            formBind: true,
            handler: function() {
                panel.getForm().submit({
                    url: *Call to the server*,
                    method  : 'POST',
                    timeout: 300000, // 5min
                    waitMsg: 'Please wait while we send your email',                        
                    success :function(form, action) {
                        window.close();
                    }                                                
                });
            }
        },
        {
            text: 'Close',
            handler: function() {
                window.close();
            }
        }
    ]
});

当我使用FF将表单提交到服务器时,一切都很好。但IE8出现问题。 IE正在显示安全栏,说我正在尝试将文件下载到计算机,这与我正在做的完全相反(我正在上传文件)!

如何阻止触发此安全栏?

- 编辑2010年12月18日美国东部时间16:48-- 是否可能由此引起:(来自EXTJS basicForm文档)

  

不使用普通的“Ajax”技术执行文件上传,即不使用XMLHttpRequests执行文件上载。而是以标准方式提交表单,其中DOM元素被临时修改以使其目标设置为引用动态生成的隐藏,其被插入到文档中但在收集返回数据之后被移除。浏览器解析服务器响应以创建IFRAME的文档。如果服务器使用JSON发送返回对象,则必须将Content-Type标头设置为“text / html”,以告知浏览器将文本未更改地插入到文档正文中。对HTML解析器有意义的字符必须作为HTML实体发送,因此编码“<” as“<”,“&”作为“&”从文档中检索响应文本,并创建包含responseText属性的伪XMLHttpRequest对象,以符合事件处理程序和回调的要求。请注意,文件上载数据包与内容类型multipart / form一起发送,并且某些服务器技术(尤其是JEE)可能需要一些自定义处理才能从数据包内容中检索参数名称和参数值。

我认为我不了解有关解释的一切......

- 结束编辑 -

由于 阿兰

4 个答案:

答案 0 :(得分:6)

在服务器端,您必须执行以下操作,即使它看起来有点奇怪:

  • 将响应类型设置为“text / html”
  • 发送{“success”:true}作为JSON对象

响应类型使浏览器在iframe ExtJS使用中呈现响应 ExtJS从DOM读取它,并将其解释为JSON,寻找成功字段。

答案 1 :(得分:2)

这就是Ext写入文档的内容。

<iframe id="ext-gen170" name="ext-gen170" class="x-hidden" src="about:blank"><html><head></head><body></body></html></iframe>  

可以通过设置有效的https src路径来解决此问题,例如https://yousite.com/blank.html

我还没有找到如何修改src。欢迎任何帮助

答案 2 :(得分:1)

我相信ExtJs正在这样做:

    if(Ext.isIE) {
        frame.src = Ext.SSL_SECURE_URL;
    }

该字符串定义为:

    /**
     * URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
     * the IE insecure content warning (<tt>'about:blank'</tt>, except for IE in secure mode, which is <tt>'javascript:""'</tt>).
     * @type String
     */
    SSL_SECURE_URL : isSecure && isIE ? 'javascript:""' : 'about:blank',

... isSecure是:

    isSecure = /^https/i.test(window.location.protocol);

这就是你的约会:空白的来源。 如果这不起作用,听起来你需要将该URL设置为适合你的东西(或者isSecure的值可能正在起作用)。

答案 3 :(得分:0)

根据您的建议和许多测试,这是我做的。我只是在将extall库包含到我的https应用程序上的空白图像后立即分配SSL_SECURE_URL常量。

Ext.SSL_SECURE_URL = 'https://mysite.com/blank.gif';

不再有问题。

非常感谢。