带文件上传功能的 JQuery Ajax 表单在 IE 中不起作用

Question

我使用 Jquery Ajax Form 上传文件，它在 Chrome 和 Firefox 中运行良好，但在 IE 中不起作用。它会弹出一个窗口，告诉我保存要上传的文件。

如果需要的话，我的代码的一些示例在这里: HTML:

<div class="addNewDocumentContent">
<form id="AddNewDocForm" action="@Url.Action("AddNewDocument", "BidForm")" enctype="multipart/form-data" method="post">
<div>
    <input name="File" type="file" style="width: 80%;" />
</div>
<div>
    <label>
        @Labels.Name</label>
    <input type="text" name="Name" style="width: 80%;" />
</div>
<div style="text-align: right;">
    <button type="button" name="Back" value="Back">
       @Buttons.GoBack
    </button>
    <button type="submit" name="Add" value="Back">
        @Buttons.Add
    </button>
</div>
</form>

JS:

//Document Ready=============================================================================
$(function () { 

    $('#AddNewDocForm').ajaxForm({
        type: 'POST',
        beforeSubmit: function () {
            return $("#AddNewDocForm").valid();
        },
        success: function (documents) {
            FillDocuments(documents);
            $('#dialogAddNewDocument').dialog('close');
        }
    });
});
//Validate====================================================================================
//Validation=====================================================================================
$(function () {
    $("#AddNewDocForm").validate({
        ignore: ":not(:visible)",
        rules: {
            File: "required",
            Name: "required"
        }
    });
});
//=========================================================================================

行动

[HttpPost]
    public JsonResult AddNewDocument(DocumentModel document)
    {
        if (ModelState.IsValid)
        {
            List<DocumentModel> documents = null;
            if (Session["Documents"] != null)
            {
                documents = (List<DocumentModel>)Session["Documents"];
                var doc = documents.OrderByDescending(x => x.Number).Take(1).FirstOrDefault();

                document.Number = doc != null ? doc.Number + 1 : 1;
                document.FileName = document.File != null ? document.File.FileName : document.FileName;
                documents.Add(document);
            }
            else
            {
                documents = new List<DocumentModel>();
                document.Number = 1;
                document.FileName = document.File != null ? document.File.FileName : document.FileName;
                documents.Add(document);
                Session["Documents"] = documents;
            }

            var displaydocs = documents.Select(x => new
            {
                Name = x.Name,
                Number = x.Number,
                File = x.File != null ? x.File.FileName : x.FileName,
                Route = x.Route != null ? x.Route : "#",
            });

            return Json(displaydocs, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return null;
        }
    }

最后是模型:

  public class DocumentModel
{
    public int Number { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public HttpPostedFileBase File { get; set; }

    public string FileName { get; set; }
    public string Route { get; set; }
}

同样，它适用于除 IE8 之外的所有浏览器。我可能不是唯一一个，但我还没有找到答案。

Answer 1

这个问题has been问many times 。发帖前请搜索。 documentation明确指出:

Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object. This is a common fallback technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses when using the iframe mode, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers. Please note, however, that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to.

由于您从 Controller 操作返回 JSON，因此您需要尊重文档的内容 => 包装在 <textarea> 中元素。