Asp.net MVC:如何上传多张图片文件？

Question

有没有一个好的示例可以展示如何在asp.net mvc中上传多个图像文件？ 我知道我们可以使用HttpPostedFileBase来上传一个文件。 是否有一种方法可以通过单击一个按钮来上传多个文件？

我以前在Webform中使用ajaxtoolbox中的文件上传并喜欢它的工作方式。 在MVC中是否有类似的方式？ 或者，是否有现有的控件可以很好地完成这项工作？ 免费的控件更好，但即使需要一些费用也可以。

谢谢

- urlreader

---

我们在上一份工作中使用了http://www.plupload.com/来进行多文件上传。 - Matt Bodily

有没有一个在ASP.NET MVC中使用它的简单示例？谢谢。 - urlreader

我不再有那个代码库的访问权限了。这是我在谷歌上找到的一个例子：https://pluploadmvc4demo.codeplex.com/ - Matt Bodily

Answer 1

您可以使用 POST http 动词实现一个操作，以接收一组 HttpPostedFileBase 并保存所有文件，例如：

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) 
{
    foreach (var file in files)
    {
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    }

    return View();
}

你也可以阅读Request.Files并完成相同的工作。

[HttpPost]
public ActionResult Upload() 
{
    foreach (var file in Request.Files)
    {
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    }

    return View();
}

相关链接

• MVC中单文件上传至多文件上传
• 使用ASP.NET MVC上传文件（或多个文件）

- Felipe Oriani

---

非常感谢您提供的链接，它们确实帮助了我。 - magorich

我尝试上传了396个CSV文件，一切正常，但当我尝试上传484个文件时，它不再工作了，我错过了什么？我已经根据这个网站编辑了web.config。 - j1rjacob

Answer 2

使用这个jQuery插件

只需包含插件js文件，创建标签：

<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />

除了IE9不能在选择对话框中选择多个文件之外，其他浏览器都可以。

添加一些JavaScript：

$(function () {
    $('#fileUpload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

在控制器操作中，只需检查 Request.Files 并执行您想要的操作即可。这里有一个很好的 文档。

[HttpPost]
public JsonResult Upload() 
{
    foreach (var file in Request.Files)
    {
        if(file.ContentLength > 0)
        {
            file.SaveAs(Server.MapPath("~/Upload/" + file.FileName));
        }
    }

    return Json(new { result = true });
}

- aleha

---

使用此插件，可在此处找到基本示例：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin - JP Tétreault

Answer 3

我正在使用这个。 https://www.fyneworks.com/jquery/multiple-file-upload/

<input type="file" name="file" class="multiple" /> 

[HttpPost] 
public ActionResult Upload()  
{
    if (Request.Files.Count > 0)
    {
          foreach(var file in Request.Files) {  }
    }

    return View(); 
}

- Kadir

Answer 4

一些文件上传所需的基本位

注意关键字: multiple 在输入元素中和 multipart 在表单元素中

HTML 方面

@using (Html.BeginForm("MyUpload", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" })) { 
    <input type="file" name="myFiles" multiple />
    <button class="btn btn-default">Upload</button>   
}

---

控制器

[HttpPost]
public ActionResult MyUpload(IEnumerable<HttpPostedFileBase> myFiles)
{
    foreach (var file in myFiles)
    {
        if (file != null && file.ContentLength > 0)
        {
            //handle files;
        }
    }
    return View();
}

- Moji