使用 ASP.NET MVC 3 的 Blueimp 多文件上传器

发布于 2024-10-18 03:35:27 字数 2966 浏览 2 评论 0原文

我正在尝试将 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。

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

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

干杯!

I am trying to add blueimp File Upload to a MVC application and I'm having problems with receiving the files in the post action(im going for the multi file upload functionality).Can someone please help me figure this out?

In my view i have the following code:

<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>

The JQuery code for blueimp File Upload is the following:

$(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();
        });
    });

And inside the controller the following action method:

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

I am using MVC 3.

In the action method, if the argument is of type IEnumerable it receives null and if the argument is of type HttpPostedFileBase it receives the files in a strange way and the action method doesn't work how it's suppose to.

Any kind of help is much appreciated, thanks.

Cheers!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

笔芯 2024-10-25 03:35:27

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

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

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

如果你想在同一个请求中处理多个上传文件,你可以看看 文档的相应部分

The SaveFile controller action will be called for each file. So it should look like this:

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

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

And if you want to handle multiple upload files in the same request you may take a look at the respective section of the documentation.

请止步禁区 2024-10-25 03:35:27

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

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

To get the files you could use,

foreach (string inputTagName in Request.Files)
{                
    HttpPostedFileBase file = Request.Files[inputTagName];
}
绅士风度i 2024-10-25 03:35:27

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

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

I know that this is an old issue, but just to point in here. In addition to Darin Dimitrov post - returned json should be in format compatible with jQuery File Upload - which expects array even if one file is transmitted. For example:

        return Json(
            new
            {
                files = new[]{
                                new { 
                                        name = "www.png",
                                        size = "1234567"
                                    }
                              }
            }
        );
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文