IE9 中的 JQuery.Form.JS XHR 错误答案

【问题标题】：JQuery.Form.JS XHR error in IE9IE9 中的 JQuery.Form.JS XHR 错误
【发布时间】：2015-07-25 22:05:13
【问题描述】：

我在 IE 9 中使用 jQuery.form.js 时遇到问题，其中 XHR 返回的是 <form> 的 DOM，而不是来自 POST 的响应。

我创建了一个jsfiddle 来演示该问题，它基于this（在IE9 中确实有效）。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
    <form action="http://jquery.malsup.com/form/file-echo2.php" method="post" enctype="multipart/form-data">
        <input type="file" name="myfile">
        <input type="submit" value="Submit">
    </form>     
    <div id="status"></div>
    <script>
        (function() {
            var status = $('#status');
            $('form').ajaxForm({
                //xhrFields: {withCredentials: true},
                beforeSend: function() {
                    status.html("Submitting...");
                },
                success: function() {
                    status.html("Done...");
                },
                complete: function(xhr) {
                    status.html(xhr.responseText);
                }
            }); 
        })();       
    </script>
</body>

鉴于原始示例在 IE 9 中有效，我认为我的 jsfiddle 应该可以工作，但我就是想不通。非常感谢任何帮助。

【问题讨论】：

标签： jquery forms internet-explorer-9

【解决方案1】：

对于具有多个文件上传控件的表单，我在 IE11 和 jQuery.Form 3.51 中遇到了同样的问题。通过使用旧版本的 jQuery.Form，我知道 text/plain 或 text/html 内容类型的要求，所以我已经有了这些要求。也就是说，我在打电话

drupal_add_http_header('Content-Type', 'text/html');

在我的处理函数中。几年前我在某处读过，设置标题应该是你在处理函数中做的第一件事，所以它是函数的第一行。无论如何，当我在调用之前添加一些调试代码时，它就开始工作了！所以基本上我的解决方案是确保上面的函数调用不是我函数的第一行。不知道合不合逻辑……

【讨论】：

【解决方案2】：

睡了一晚，头脑更清醒了，我现在可以回答我自己的问题了！！

首先，我通过添加打开调试：

$.fn.ajaxSubmit.debug = true;

通过调试，我可以在控制台中看到以下内容。

[jquery.form] fileAPI :false
[jquery.form] state = loading
[jquery.form] cannot get iframe.contentWindow document: TypeError: Permission denied
[jquery.form] cannot get iframe.contentDocument: Error: Access is denied.

因此，问题是由于 CORS，其中来自 POST 请求的响应被加载到临时 <iframe>，但父 <html> 无法访问 <iframe>。

据我所知，没有办法在 IE9 中使用 jquery.form.js 插件进行 CORS 请求。

但是，如果您在同一台服务器上编写自己的服务托管，则关键是将响应返回为 HTML 或 XML（如官方 documentation 中所述）

这是我如何使用 C# Web API 2 实现的代码 sn-p：

public class UploadController : ApiController
{
    [HttpPost]
    public async Task<HttpResponseMessage> UploadFile()
    {
        //
        // Verify that this is an HTML Form file upload request
        //
        if (!Request.Content.IsMimeMultipartContent("form-data"))
        {
            throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.UnsupportedMediaType));
        }

        var filesReadToProvider = await Request.Content.ReadAsMultipartAsync();

        //
        // Read the file... return a string (i.e. strResp)
        // 

        var resp = new HttpResponseMessage(HttpStatusCode.OK);
        resp.Content = resp.Content = new StringContent(strResp, Encoding.UTF8, "text/plain");

        return resp;
    }
}

然后在前端 UI 上，xhr.responseText 现在应该是正确的并以字符串形式返回。使用 JavaScript 将字符串解析回 JSON 或数组。

希望这对面临类似问题的其他人有用。

【讨论】：