c# - 带有附加数据的 MVC 多文件上传

Question

通过执行以下操作，我已经能够将多个文件成功发布到我的 Controller :

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

但是，我还试图在上传的每个文件中包含一些用户必须输入的信息，例如标题和版本

这是一个demo也许可以展示我正在努力实现的目标。

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

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

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

Answer 1

先创建2个ViewModel

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

创建 Controller 。一个操作用于显示空表单，第二个操作用于处理 View 中的数据。

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

并创建 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 属性生成正确的索引