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

时间:2015-05-22 11:16:28

标签: javascript jquery ajax asp.net-mvc html5

我有一个简单的模型:

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。我的错误在哪里?

1 个答案:

答案 0 :(得分:2)

为了绑定到复杂对象的集合,名称(在名称/值对中)必须包含索引器。您的脚本需要使用以下格式将名称添加到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();
  ....