jquery - IE jquery 异步文件上传请求挂起

Question

我创建了一个带有进度条的新的多拖放文件上传控件。它适用于所有浏览器，但 IE 10 及更高版本存在问题。

当我在 IE 中上传文件时，大多数时候 jquery 异步请求不会完成。显示待处理。我可以在 IE 网络调试器窗口中看到它处于挂起状态。但在所有其他浏览器中它运行良好。我不知道这里出了什么问题。最初我认为这可能与缓存有关。但是在服务器响应上添加以下参数后。它仍然处于挂起状态

context.Response.AppendHeader("Cache-Control", "no-cache"); // HTTP 1.1
context.Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.1 

for (var i = 0; i < files.length; i++) {
        var data = new FormData();
        data.append(files[i].name, files[i]);
        uploadFile(handlerurl, data);
    }
function uploadFile(handlerurl, formData) {
                var jqXHR = $.ajax({
                    type: 'POST',
                    url: handlerurl,
                    contentType: false,
                    processData: false,
                    async: true,
                    cache: false,
                    data: formData,                         
                    xhr: function () {   },
                    success: function (result, status, xhr) {   },
                    error: function (xhr, status, error) {   }
          });
}

我正在为每个文件调用这个函数。我不确定 IE 有什么问题。

编辑:调试后，发现服务器断点会命中。但是 context.Request.Files 中没有文件。没有文件从 jquery/AJAX 发送。您可以通过不断上传相同的文件来重现此问题。

Answer 1

问题

在通过 ajax 查找文件上传选项而不发布整个表单时，我们经常在互联网上遇到使用 FormData API 的代码，它在 chrome 和 mozilla 上运行良好，但在 IE 上运行不佳。

解决方案

所以想法是将表单的目标指向 iframe，甚至将加载事件绑定(bind)到 iframe，以便您知道上传何时完成并编写额外的 jquery 函数。您甚至可以隐藏 iframe 而不向用户显示。但是这个解决方案也适用于 IE。代码如下

该代码还展示了如何随文件发布一起发布附加数据。

@{
    ViewBag.Title = "Index";
}
<script src="~/scripts/jquery-1.9.1.min_.js"></script>
<script type="text/javascript">
    function successFunction() {
        alert($('#my_iframe').contents().find('p').html());
    }
    function redirect() {
        //debugger;
        document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe
        //document.getElementById('my_form').submit();
        var callback = function () {
            if (successFunction)
                successFunction();
            $('#frame').unbind('load', callback);
        };

        $('#my_iframe').bind('load', callback);
        $('#hfParam').val('id:1');

        $('#my_form').submit();
        //$("#my_form").trigger("submit");

    }
</script>
<h2>Index</h2>
<input type="button" name="action" value="Upload" onclick="redirect();"/>
<form id="my_form" name="my_form" action="/FileUpload/UploadFile" method="POST" enctype="multipart/form-data" >
    <div id="main">
        <input name="my_hidden" id="hfParam" type="hidden" />
        <input name="my_files" id="my_file" type="file" />
        <iframe id='my_iframe' name='my_iframe' src="">
        </iframe>
        <div id="someDiv"></div>
    </div>

</form>


[HttpPost]
        public ActionResult UploadFile()
        {
            ContentResult result = new ContentResult() { Content = "<p></p>", ContentType = "text/html"};
            HttpPostedFileBase postedFile = Request.Files[0];
            try
            {
                result.Content = "<p>" + postedFile.FileName + "</p>";

            }
            catch (System.Exception ex)
            {
                result.Content = ex.Message;
            }
            return result;
        }

发件人:http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html