Internet Explorer8 和 9 中的 Ext Js Filefield 问题答案

【问题标题】：Ext Js Filefield issue in Internet Explorer8 and 9Internet Explorer8 和 9 中的 Ext Js Filefield 问题
【发布时间】：2014-04-21 18:51:24
【问题描述】：

我的表单中有一个文件字段。当我通过控制器提交表单时，IE 显示安全栏说我正在尝试将文件下载到计算机，这与我正在做的完全相反（我正在上传文件）。当我使用 FF 将表单提交到服务器时，一切都很好。但是IE8和IE 9出现问题。

控制器动作：

var myForm = Ext.getCmp('uploaddraftpcpPanel').getForm(); // get the basic form
if (myForm.isValid()) { // make sure the form contains valid data before submitting
    myForm.submit({


        headers: {
            enctype: 'multipart/form-data; charset=UTF-8'
        },
        url: 'upload/uploaddraftpcp.action',


        success: function (myForm, action) {
            Ext.Msg.alert('success', "success");
        },
        failure: function (myForm, action) {
            Ext.Msg.alert('Failed', "failed");
        }
    });


} else { // display error alert if the data is invalid
    Ext.Msg.alert('Invalid Data', 'Please correct form errors.');
}

服务器端代码如下所示：

@RequestMapping(value = "/upload/uploaddraftpcp.action", method = RequestMethod.POST)


public @ResponseBody
Map<String, ? extends Object> uploadDraftpcp(HttpServletRequest request){
    Map<String, Object> modelMap = new HashMap<String, Object>(2);

    try {

        System.out.println("title pcp" + request.getParameter("title"));
        System.out.println("description pcp"
                + request.getParameter("description"));
        //    response.setContentType("text/html");

        modelMap.put("message", "Successfully submitted Form");
        modelMap.put("success", true);
        return modelMap;
    } catch (Exception e) {
        System.out.println(e.toString());
        e.printStackTrace();
        return ExtJSReturn
                .mapError("Error retrieving data.");
    }

}

【问题讨论】：

标签： spring-mvc extjs4.2

【解决方案1】：

In Ext JS，文件上传不是使用普通的“Ajax”技术执行的，也就是说它们不是使用 XMLHttpRequests 执行的。而是临时创建一个包含所有字段的隐藏元素，并提交其目标集以引用动态生成的隐藏元素，该元素被插入到文档中，但在收集返回数据后被删除。

浏览器解析服务器响应以创建 IFRAME 文档。如果服务器使用 JSON 发送返回对象，则必须将 Content-Type 标头设置为 text/html 以便告诉浏览器将文本插入到文档正文中。

Chrome、FF、IE10 及更高版本只有在响应标头中看到 Content-Type = application/json 时才会执行此操作。但是，当您对 IE8 和 IE9 执行此操作时，当服务器从文件上传响应时，您会看到一条消息，内容类似于：“您要打开还是保存此文档”？

所以，要在 IE8 和 IE9 中解决这个问题，只需将 Content-Type 设置为 text/html 即可。现代浏览器的响应是一样的，所以你不会用那个解决方案破坏任何东西。

【讨论】：