jQuery File Upload 插件要求我下载文件，这是怎么回事？答案

【问题标题】：jQuery File Upload plugin asks me to download the file, what is wrong?jQuery File Upload 插件要求我下载文件，这是怎么回事？
【发布时间】：2013-03-06 09:13:13
【问题描述】：

我正在使用https://github.com/blueimp/jQuery-File-Upload，我能够将文件上传并保存到指定文件夹，然后返回 Json 对象。然后浏览器（我使用 IE8）弹出“文件下载”对话框并要求我下载一个名为“upload75bea5a4”且没有扩展名的文件。我就是想不通是哪里出了问题？

【问题讨论】：

标签： jquery-plugins asp.net-mvc-3

【解决方案1】：

我使用的是同一个插件，它对我来说没有任何问题。我将发布我正在使用的代码，以便为您提供帮助。我在Scott Hanselman's blog 看到的 C# 代码（我做了一些更改）。

用于存储文件属性的类：

public class ViewDataUploadFilesResult
{
    public string Name { get; set; }
    public int Length { get; set; }
    public string Type { get; set; }
}

上传代码，由ajax调用：

    [HttpPost]
    public string UploadFiles()
    {
        var r = new List<ViewDataUploadFilesResult>();
        Core.Settings settings = new Core.Settings();
        foreach (string file in Request.Files)
        {
            HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
            if (hpf.ContentLength == 0)
                continue;
            string savedFileName = Path.Combine(settings.StorageLocation + "\\Files\\", Path.GetFileName(hpf.FileName));
            hpf.SaveAs(savedFileName);

            r.Add(new ViewDataUploadFilesResult()
            {
                Name = hpf.FileName,
                Length = hpf.ContentLength,
                Type = hpf.ContentType
            });
        }
        return "{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}";
    }

创造魔法的 javascript 片段：

$('#file_upload').fileUploadUI({
    uploadTable: $('#files'),
    downloadTable: $('#files'),
    buildUploadRow: function (files, index) {
        return $('<tr><td>' + files[index].name + '<\/td>' +
                '<td class="file_upload_progress"><div><\/div><\/td>' +
                '<td class="file_upload_cancel">' +
                '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                '<\/button><\/td><\/tr>');
    },
    buildDownloadRow: function (file) {
        return $('<tr><td>' + file.name + '<\/td><\/tr>');
    }
});

看看并做一些测试。

编辑

I wrote an article about it.

【讨论】：

非常感谢戴维斯，我试过了，现在我在 javascript 文件“jquery.fileupload-ui.js”第 94 行得到一个异常，说有一个未处理的异常。有什么想法吗？
该示例页面上有一个
。您是否也将其添加到页面中？否则，您要么有错误，要么根本没有上传任何文件。
是的，我有那行。你对响应内容类型做了什么特别的事情吗？
我刚刚更新了 javascript 代码。如果您使用的是我发布的那个，您可能会遇到此错误，因为我做了一些小改动，因为我有一个非常具体的案例。所以，再复制一次。我取自原始来源。但实际上你有这个错误很奇怪。我唯一遇到的问题是那张桌子的 bcoz，我第一次忽略了它。无论如何，正如我所说，试试这个新的 javascript。
可能是表单...
enctype="multipart/form-data" >

【解决方案2】：

刚刚在常见问题解答中找到了这个。见#2 https://github.com/blueimp/jQuery-File-Upload/wiki/Frequently-Asked-Questions

要点是当 HTTP_ACCEPT 标头不存在或不包含“application/json”时将 content-type 设置为 text/plain（在 xhr 上传时推断 iframe）。

D. Sousa 对 enctype="multipart/form-data" 的提醒 +1 - 我遇到了这个问题以及内容类型。

【讨论】：

【解决方案3】：

我有同样的问题。对于 .Net，用于检查 MVC 中返回的内容类型的代码如下所示：

if (Request.ServerVariables["HTTP_ACCEPT"] != null && Request.ServerVariables["HTTP_ACCEPT"].Contains("application/json"))
{
    return Json(data, "application/json");
}
else
{
    return Json(data, "text/plain");
}

显然 IE 不喜欢Content-type: text/plain，而是喜欢text/plain。

希望这可以让人们更加头痛。

【讨论】：