在asp.net mvc中使用fileupload时如何防止IE保存文件对话框

Question

当我尝试使用 ASP.NET MVC 上传文件时，它在 FF && Chrome 中运行良好，但在 IE 和 Opera 中会弹出一个对话框，要求我下载、保存或取消。

选择任何一个选项都会阻止文件上传工作。我该如何解决这个问题？

 public class ImportModel
    {                     
        [Required]
        [FileExtensions("csv", ErrorMessage = "Please upload a valid .csv file")]
        public HttpPostedFileBase File { get; set; }
    }



[HttpPost]
    public virtual ActionResult StartImport(ImportModel model = null)
    {
        if (model != null)
        {
            var status = _importService.StartImport(model);
            return Json(status, JsonRequestBehavior.AllowGet);
        }
        return null;
    }

查看下面的代码（摘要）：

<div id="dlgImport" class="hidden">

        @using (Html.BeginForm(MVC.Import.StartImport(), FormMethod.Post, new { @class = "smallForm", id = "frmImport", enctype = "multipart/form-data" }))
        {            
            <div class="fields-inline">
                <div class="editor-label">
                    @Html.Label("File")
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(x => x.File, new { @class="input-file", type = "file" })
                    @Html.ValidationMessageFor(x => x.File)
                </div>              
            </div>
        }
    </div>

</div>



$(function() {
        $("#frmImport").ajaxForm({
            success: function (responseHtml) {
                // response is wrapped in pre tags by the browser - the ajax upload is carried out using an iframe                                                
                var response = $.parseJSON($(responseHtml).text());
            }
        });
});


 var vm = {

        startImport: function () {

            if ($("#frmImport").valid()) {                
                $("#frmImport").submit();
            }
        }

    }

Answer 1

现在您已经发布了代码，看起来您正在使用jquery form plugin。正如documentation 中所述，此插件支持使用 AJAX 上传文件，但您无法从服务器端脚本返回 JSON：

由于无法使用浏览器的 XMLHttpRequest 对象，Form Plugin 使用隐藏的 iframe 元素 帮助完成任务。这是一种常见的技术，但它具有固有的 限制。 iframe 元素用作表单的目标 提交操作，这意味着服务器响应被写入 内嵌框架。如果响应类型是 HTML 或 XML，这很好，但是 如果响应类型是脚本或 JSON，则两者都不起作用 通常包含需要使用实体来表示的字符 在 HTML 标记中找到时的引用。

为了解决脚本和 JSON 响应的挑战，表单 插件允许将这些响应嵌入到 textarea 元素中，并且 建议您在使用这些响应类型时这样做 与文件上传结合。但请注意，如果有 表单中没有文件输入，则请求使用普通 XHR 提交 表单（不是 iframe）。这会给您的服务器代码带来负担 知道何时使用文本区域，何时不使用。

所以基本上你的上传控制器动作应该响应：

<textarea>{"foo":"bar"}</textarea>

代替：

{"foo":"bar"}

此外，在这种情况下，您不应使用 application/json 响应内容类型。

您可以编写自定义操作结果来实现：

public class FileJsonResult : JsonResult
{
    public FileJsonResult(object data)
        : base()
    {
        Data = data;
        JsonRequestBehavior = JsonRequestBehavior.AllowGet;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.Write("<textarea>");
        base.ExecuteResult(context);
        context.HttpContext.Response.Write("</textarea>");
        context.HttpContext.Response.ContentType = "text/html";
    }
}

然后：

[HttpPost]
public virtual ActionResult StartImport(ImportModel model = null)
{
    if (model != null)
    {
        var status = _importService.StartImport(model);
        return new FileJsonResult(status);
    }
    new FileJsonResult(new { status = false, errorMessage = "The model was null" });
}

现在您可能还需要调整成功处理程序以去除 <textarea> 标记：

$('#frmImport').ajaxForm({
    success: function (responseHtml) {
        var responseHtml = responseHtml
            .replace(/\<textarea\>/i, '')
            .replace(/\<\/textarea\>/i, '');
        var response = $.parseJSON(responseHtml);
        // do something with the response
    }
});

Answer 2

我在使用 IE8 时遇到了同样的问题，这个答案对我帮助很大。但我需要进行一些在 IE8、Chrome 和 Firefox 中运行良好的更改。

按照以下更改：

success: function (responseText) {
    try{
        var response = $.parseJSON(responseText);
        //code ...
    }    
    catch(ex) {
        //error code
    }
}

[HttpPost]
public JsonResult Upload(HttpPostedFileBase file) {
    //code
    return Json(new { Success = "true", Message = "Done!" }, "text/html");
}