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

【问题标题】：IE jquery async file upload request pendingIE jquery 异步文件上传请求挂起
【发布时间】：2015-03-12 21:55:46
【问题描述】：

我创建了一个带有进度条的新的多拖放文件上传控件。它适用于所有浏览器，除了 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 发送的文件。您可以通过反复上传相同的文件来重现此问题。

【问题讨论】：

类似问题：stackoverflow.com/questions/16976079/…
你用的是什么版本的IE？
你需要展示构建formData对象的代码
尝试将内容类型更改为multipart/form-data，并且在xhr 和成功定义之后我看不到逗号，并且$.ajax({ --- }); 没有正确关闭
试过了，还是可以重现同样的问题。

标签： jquery html internet-explorer xmlhttprequest jquery-file-upload

【解决方案1】：

问题

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

解决方案

所以想法是将表单的目标指向 iframe，甚至将加载事件绑定到 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

【讨论】：

我应该如何使用 iframe 回发在进度栏中显示上传进度。

【解决方案2】：

您是否尝试为 handlerUrl 传递绝对 URL？

如果您的代码是在独立的 js 文件中编写的，那么绝对 URL 会有所帮助，如果代码是在 html 上编写的，那么传递正确的相对 URL 会有所帮助。

【讨论】：

【解决方案3】：

您可以创建一个 iframe，然后使用此 iframe 附加和发布您的图片。它会简单地发布您的图片，但看起来就像您使用 ajax 发布的一样。

【讨论】：

【解决方案4】：

我们正在使用https://blueimp.github.io/jQuery-File-Upload/ 在 IE 上完美运行，当然，当您使用 IE8-9 时，您不能真正完全甚至部分支持 Drag 'n Drop，但它的 IE。

fileUpload.fileupload({
     autoUpload: false,
     dataType: 'json',
     url: url,
     uploadTemplateId: null,
     downloadTemplateId: null,
     filesContainer: $('.x-table-uploaded-files tbody'),
     uploadTemplate: function (o) {  ... a.s.o

我处理过的所有上传者中最好的。（对不起，来源不完整，工作，不能分享太多：/）

    [HttpPost]
    public JsonResult Upload(IEnumerable<HttpPostedFileBase> files, int CId)
    {
        UploadResult result = cf.Handle(files, CId);
        result.ErrorCount = result.files.Count;
        if (result.files.Count > 100)
        {
            result.files = new List<FileErrorResults>();
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

该示例是一个自动上传拖放文件解析器，它在分析后实时返回结果并给出文件错误，而用户正在拖动他的其余文件。支持IE10及以上，当然IE8-9你必须点击选择文件而不是拖放，但我想这对他们使用IE来说已经足够了。

但是，我确实尝试在 Google 上为您寻求解决方案，但 IE 团队列表中似乎存在很多用于上传待处理问题的错误，在许多情况下文件只是卡住了。这是一个危险的平台。

【讨论】：