以一种形式上传多个文件 MVC4答案

【问题标题】：Upload multiple files in one form MVC4以一种形式上传多个文件 MVC4
【发布时间】：2013-12-11 01:45:45
【问题描述】：

我正在尝试在一个表单上上传多张图片

@using (Html.BeginForm("Create", "AdminRestaurants", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-group">
    <label for="logoFile" class="col-sm-2 control-label">Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="logoFile" id="logoFile" />
    </div>
</div>
<div class="form-group">
    <label for="fohFile" class="col-sm-2 control-label">FOH Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="fohFile" id="fohFile" />
    </div>
</div>
<div class="form-group">
    <label for="bohFile" class="col-sm-2 control-label">BOH Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="bohFile" id="bohFile" />
    </div>
</div>
<div class="form-group">
    <label for="mgmFile" class="col-sm-2 control-label">MGM Logo:</label>
    <div class="col-sm-6">
        <input type="file" multiple="" name="mgmFile" id="mgmFile" />
    </div>
</div>

我正在尝试用这个处理控制器上的表单

public ActionResult Create(IEnumerable<HttpPostedFileBase> files, RestaurantModel collection)
{
    if (ViewData.ModelState.IsValid)
    {
    }
}

目前，控制器上的 files 签名中没有显示任何内容。仅使用一个文件时，这似乎效果很好

public ActionResult Create(HttpPostedFileBase file, EventsModel collection)

有人可以指出允许使用一个提交表单上传多个文件的方向吗？

【问题讨论】：

标签： c# asp.net-mvc asp.net-mvc-4 file-upload

【解决方案1】：

您的问题是您的表单创建了一个发布请求，其中包含模型绑定器可以绑定的信息，因为命名约定不正确。

你看，你有 4 个文件字段，每个字段都有不同的名称，为了让模型绑定器正确绑定它们，你的控制器动作签名应该如下所示：

public ActionResult Create(HttpPostedFileBase mgmFile, 
                           HttpPostedFileBase logoFile, 
                           HttpPostedFileBase fohFile ,
                           HttpPostedFileBase bohFile)

遵循 MCV 设计模式最好的选择是使用包含 IEnumerable<HttpPostedFileBase> 的 ViewModel 你会为IEnumerable<HttpPostedFileBase>创建一个自定义编辑器模板

这样你就可以这样使用它：

Html.EditorFor(m=>Model.filesUploaded)

您的控制器操作如下所示：

public ActionResult Create(MyViewModel i_InputModel)
{
    i_InputModel.filesUploade; //Use the files here to upload them.
}

其他选项有： 在文件输入字段上使用 HTML5 多重属性，如下所示：

<label for="mgmFile" class="col-sm-2 control-label">Files:</label>
<div class="col-sm-6">
    <input type="file" multiple="multiple" name="files" id="files" />
</div>

还有一个像这样的控制器动作：

public ActionResult Create(HttpPostedFileBase files)

或使用多个文件字段，但以它们的名称索引它们：

<input type="file" multiple="multiple" name="files[0]" id="files_1" />
<input type="file" multiple="multiple" name="files[1]" id="files_2" />
<input type="file" multiple="multiple" name="files[2]" id="files_3" />
<input type="file" multiple="multiple" name="files[3]" id="files_4" />

然后你可以使用这样的控制器动作：

public ActionResult Create(IEnumerable<HttpPostedFileBase> files)

【讨论】：

最后一个带有索引名称的解决方案对我来说是完美的。谢谢

【解决方案2】：

这仅在您的文件输入具有诸如files[0]、files[1]、files[2]、...之类的索引名称时才有效。

为了了解模型绑定到列表在 asp.net mvc 中的工作原理，我建议您阅读这篇文章：Model Binding to a List

您甚至不必使用模型绑定来获取文件。在您的操作中使用Request.Files 来获取它们。

public ActionResult Create(EventsModel collection)
{
    var files = Request.Files;
    // rest of the code...
}

【讨论】：

【解决方案3】：

<td>
      <input type="file" name="files" id="files" multiple="multiple" />
      </td>

在这里，我用一个简单的例子来演示：http://www.infinetsoft.com/Post/How-to-create-multiple-fileUpload-using-asp-net-MVC-4/1229#.V0J-yfl97IU

【讨论】：