带有 ASP.NET MVC 3 的 Blueimp 多文件上传器答案

【问题标题】：Blueimp multi file uploader with ASP.NET MVC 3带有 ASP.NET MVC 3 的 Blueimp 多文件上传器
【发布时间】：2011-02-21 09:02:53
【问题描述】：

我正在尝试将 blueimp File Upload 添加到 MVC 应用程序中，但在接收发布操作中的文件时遇到问题（我正在使用多文件上传功能）。有人可以帮我解决这个问题吗？

在我看来，我有以下代码：

<form id="file_upload" enctype="multipart/form-data" action="Home/SaveFile" method="post">    
   <input type="file" name="file" multiple="true"/>
   <button>Upload</button>
   <div>Upload files</div>        
</form>
<br />
###############################
<table id="files">
</table>

<button id="start_uploads">Start uploads</button>
<button id="cancel_uploads">Cancel uploads</button>

blueimp文件上传的jQuery代码如下：

$(document).ready(function () {

        $('#file_upload').fileUploadUI({
            uploadTable: $('#files'),
            downloadTable: $('#files'),
            buildUploadRow: function (files, index) {
                return $('<tr><td class="file_upload_preview"><\/td>' +
                        '<td>' + files[index].name + '<\/td>' +
                        '<td class="file_upload_progress"><div><\/div><\/td>' +
                        '<td class="file_upload_start">' +
                        '<button class="ui-state-default ui-corner-all" title="Start Upload">' +
                        '<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
                        '<\/button><\/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>');
            },
            beforeSend: function (event, files, index, xhr, handler, callBack) {
                handler.uploadRow.find('.file_upload_start button').click(callBack);
            }
        });
        $('#start_uploads').click(function () {
            $('.file_upload_start button').click();
        });
        $('#cancel_uploads').click(function () {
            $('.file_upload_cancel button').click();
        });
    });

并且在控制器内部有以下动作方法：

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SaveFile(IEnumerable<HttpPostedFileBase> files)
    {
        foreach (HttpPostedFileBase file in files)
        {
            //some file upload magic                
        }
        return View("MyView");
    }

我正在使用 MVC 3。

在 action 方法中，如果参数是 IEnumerable 类型，它会接收 null，如果参数是 HttpPostedFileBase 类型，它会以一种奇怪的方式接收文件，并且 action 方法不会按预期工作。

非常感谢任何形式的帮助，谢谢。

干杯！

【问题讨论】：

标签： c# asp.net-mvc-3 file-upload multifile-uploader blueimp

【解决方案1】：

将为每个文件调用SaveFile 控制器操作。所以它应该是这样的：

[HttpPost]
public ActionResult SaveFile(HttpPostedFileBase file)
{
    //some file upload magic

    // return JSON
    return Json(new
    {
        name = "picture.jpg",
        type = "image/jpeg",
        size = 123456789
    });
}

如果您想在同一个请求中处理多个上传文件，您可以查看respective section of the documentation。

【讨论】：

嘿达林，很抱歉回复晚了。这就是我需要的，一个请求的多重上传（似乎我错过了这部分文档）。谢谢！
那部分文档没有说明服务器端在一个请求中的多个文件的外观。 HttpPostedFileBase 会变成IEnumerable<HttpPostedFileBase> 吗？
可以在此处找到有关设置和 json 返回类型的更完整说明 - github.com/blueimp/jQuery-File-Upload/wiki/Setup-v4

【解决方案2】：

要获取您可以使用的文件，

foreach (string inputTagName in Request.Files)
{                
    HttpPostedFileBase file = Request.Files[inputTagName];
}

【讨论】：

当他们通过 MIME 类型八位字节而不是 image/jpeg 发送时，这会导致 Chrome 出现异常。认真点！

【解决方案3】：

我知道这是一个老问题，但只是在这里指出。除了 Darin Dimitrov 后 - 返回的 json 格式应与 jQuery File Upload 兼容 - 即使传输一个文件也需要数组。例如：

        return Json(
            new
            {
                files = new[]{
                                new { 
                                        name = "www.png",
                                        size = "1234567"
                                    }
                              }
            }
        );

【讨论】：