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

enter image description here

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查找fileupload选项而不发布整个表单的同时，我们经常使用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

Answer 2

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

如果您的代码是用独立的js文件编写的，如果代码是用html编写的，那么绝对URL可以帮助其他代码，然后传递正确的相对URL会有所帮助。

Answer 3

IE不支持以您希望的方式上传AJAX文件。最佳情况，您可以提供Flash后备。

Answer 4

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

Answer 5

我们正在使用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浏览器。

然而，我确实尝试谷歌寻找解决方案，似乎IE团队列表中有很多错误上传待决问题，许多情况下的文件都被卡住了。这是一个危险的平台。

IE jquery异步文件上传请求待处理

5 个答案: