IE9中的JQuery.Form.JS XHR错误

时间:2015-05-14 10:18:14

标签: jquery forms internet-explorer-9

我在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应该可行,但我无法弄明白。非常感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

经过一夜的睡眠,心情更清醒,我现在可以回答我自己的问题!!

首先,我通过添加:

打开调试
$.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>无法访问{{1} }}

据我所知,使用jquery.form.js插件无法在IE9中执行CORS请求。

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

以下是我如何使用C#Web API 2执行此操作的代码段:

<iframe>

然后在前端UI上,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; } } 现在应该是正确的并以字符串形式返回。使用JavaScript在JSON或数组中解析字符串。

希望这对遇到类似问题的其他人有用。

答案 1 :(得分:0)

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

private void printDocument1_EndPrint(object sender, System.Drawing.Printing.PrintEventArgs e)
{
    if (this.ObjectsEnumerator != null)
    {
        this.ObjectsEnumerator.Dispose();
        this.ObjectsEnumerator = null;
    }
}

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