带有附加数据的 MVC 多文件上传答案

【问题标题】：MVC Multiple File Upload with Additional Data带有附加数据的 MVC 多文件上传
【发布时间】：2014-02-03 04:07:19
【问题描述】：

我已经能够通过以下操作成功地将多个文件发布到我的控制器：

http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx/

然而，我正在尝试在每个上传的文件中包含一些用户必须输入的信息，例如标题和版本

这是一个demo，也许可以展示我想要实现的目标。

这是我目前想出的处理它的方法in this way。

这似乎不是我习惯将模型传递给控制器的正确方法？另一个问题是如果用户添加了三个文件上传但只选择了两个文件，那么它将不同步。

我做了一些搜索，似乎找不到这样的例子。

【问题讨论】：

标签： c# jquery asp.net-mvc model-view-controller file-upload

【解决方案1】：

首先创建 2 个 ViewModels

public class NewViewModel 
{
    // list of files with additional data
    public List<UploadItem> UploadItems { get; set; }

    public string AnotherPropForView { get; set; }
}

public class UploadItem
{
    // your additional data
    public string CustomProp1  { get; set; }
    public string CustomProp2  { get; set; }
    // file
    public HttpPostedFileBase UpFile { get; set; }
}

创建控制器。一个动作用于显示空表单，第二个动作用于处理视图中的数据。

public class SomeController : Controller 
{
    public ActionResult Create() 
    {
      NewViewModel model = new NewViewModel
      {
         // inicialize list
         UploadItems = new List<UploadItems> 
         {
            // inicialize empty objects ( if you want to have 2 file fields with additional data)
            // or inicialize only one object and another fields add by Javascript
            new UploadItem {},
            new UploadItem {},
         }
      }
      return View(model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(NewViewModel model) 
    {
        // if (ModelState.IsValid) etc...
        foreach (var uploadItem in model.UploadItems)
        {
            // work with file and additional data
            var file = uploadItem.UpFile;
            var prop1 = uploadItem.CustomProp1;
            // file.SaveAs("/some/where"); atc ...
        }

        // return some view...
    }
}

并创建视图

@model Path.To.NewViewModel
@using (Html.BeginForm("Create", "Some", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@* Print all inicialized upload items *@
  @for (int i = 0; i < Model.UploadItems.Count; i++)
  {
    @Html.TextBoxFor(model => model.UploadItems[@i].CustomProp1)
    @Html.TextBoxFor(model => model.UploadItems[@i].CustomProp2)
    <input type="file" id="UploadItems[@i].UpFile" name="UploadItems[@i].UpFile" />
  }

<button name="Action" type="submit" value="Save" class="btn">Save</button>
}

您可以使用 Javascript 将 Uploaditem 动态添加到表单 - 您必须为输入中的名称和 ID 属性生成正确的索引

【讨论】：

感谢您的代码。我让它工作了：D 我剩下的唯一问题是在模型中使用 DataAnnotations？有什么想法吗？
您可以在 ViewModel 中使用 DataAnnotations。例如在 UploadItem 类 [Display(Name = "Name for CustomProp1")] public string CustomProp1 { get;放; }