javascript - EXTJS 文件上传 - IE8 安全栏问题

Question

我正在尝试制作一个 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 EST--是否有可能是由此引起的:(来自 EXTJS basicForm 文档)

File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM element temporarily modified to have its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered. The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body. Characters which are significant to an HTML parser must be sent as HTML entities, so encode "<" as "<", "&" as "&" etc. The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks. Be aware that file upload packets are sent with the content type multipart/form and some server technologies (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.

我不认为我完全理解那里的解释......

-- 结束编辑--

谢谢阿兰

Answer 1

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

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

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