使用 FormData 通过 AJAX 将文件发送到 ASP.NET MVC答案

【问题标题】：Send files through AJAX using FormData to ASP.NET MVC使用 FormData 通过 AJAX 将文件发送到 ASP.NET MVC
【发布时间】：2015-08-04 09:27:43
【问题描述】：

我有一个简单的模型：

public class MyModel {
   public string Description { get; set; }
   public HttpPostedFileBase File {get; set; }
}

和我的 MVC 操作：

[HttpPost]
public ActionResult Upload(List<MyModel> data) {
   // do soemthing
}

最后是 JavaScript：

$("#chooseFile").on("change", function (){
    var files = $(this).prop("files");
    var array = [];    

   for(int i=0; i<files.length; i++) {
      var obj = {};
      obj.Description = "My custom description" + i;
      obj.File = files[i];

      array.push(obj);
   }

   var formData = new FormData();
   formData.append("data", array);

   var xmlHttpRequest = new XMLHttpRequest();
   xmlHttpRequest.open("POST", "/test/Upload");
   xmlHttpRequest.send(formData);
});

问题是 data 来自 Upload 操作总是有 Count = 0 。我的错在哪里？

【问题讨论】：

how to append whole set of model to formdata and obtain it in MVC的可能重复
@StephenMuecke：这对我没有帮助...请阅读问题，而不是标题。
因为我发送了一个自定义的对象列表，除了从本地计算机中选择文件之外，这与表单无关。
然后只是一个问题或正确命名您回发的内容（使用索引器），以便它绑定到您的模型。
只有当我添加formData.append(data, "files[i]") 并且在操作中我输入List<HttpPostedFileBase> data 时，它才能完美运行。我不知道为什么不使用自定义对象...

标签： javascript jquery ajax asp.net-mvc html

【解决方案1】：

为了绑定到复杂对象的集合，名称（在名称/值对中）必须包含索引器。您的脚本需要以以下格式将名称添加到 FormData - '[0].Files', '[0].Description', '[1].Files', '[1].Description' 等

$("#chooseFile").on("change", function() {
  var files = $(this).prop("files");
  var formData = new FormData();
  for(int i=0; i<files.length; i++) {
    formData.append('[' + i + '].File', files[i]);
    formData.append('[' + i + '].Description', 'My custom description' + i);
  }
  var xmlHttpRequest = new XMLHttpRequest();
  ....

【讨论】：

如果有多个列表List1, List2，您将如何附加，您将如何识别特定列表。 formData.append('List1[' + i + '].File', files[i]); 怎么样？
@BilalAhmed，如果您的模型包含一个名为 List 的集合属性，其中集合中的每个对象都包含一个名为 File 的属性，那么您就是这样做的。