通过 ajax 将 FormData 发送到控制器

Question

我想在 asp.net mvc 中上传表单。这是我的表格

<form id="fm" method="post" enctype="multipart/form-data">
<input type="text" name="no" id="txteno" data-bind="value: $root.PersonId" disabled="disabled" />
<input type="text" name="name" id="txtename" data-bind="value: $root.PersonName" />
<input type="file" name="file" accept="image/*" data-bind="file: {data: Photo, name: PersonPhoto, reader: someReader} " />
<button data-bind="click :$root.save" >Save</button>
</form>

我使用表单数据上传此表单。这是我的视图模型

var ViewModel = function () {
//declare observable
var perData = {
//evaluate object
};
var PerData = new FormData();
self.save = function () {
//append data 
PerData.append('no',perData.PersonId()); PerData.append('name',perData.PersonName());
PerData.append('file', perData.Photo());
PerData.append('file', perData.PersonPhoto());
$.ajax({
type: "POST",
url: "/Person/FileUpload",
data: PerData,
contentType: false,
processData: false,
cache: false,
//mimeType: "multipart/form-data",
success: function () {
alert("Record Added Successfully");
},
error: function () {
alert("fail");}
});};};
var vm = new ViewModel();
ko.applyBindings(vm);

这是我的控制器

[HttpPost]
public ActionResult FileUpload(Person item,HttpPostedFileBase file)
 { //some code}

通过 ajax 发送表单成功，但传递给我的控制器的项目和文件为空。

Answer 1

您应该考虑将按钮上的“click:”绑定移动到表单上的“submit:”绑定。

这将允许您像这样使用表单数据：

this.submit = function(form) {
  var formData = new FormData($(form)[0]);

  return false;
}

如果你能提供一个示例 JSFiddle，我也许可以给你一些工作代码。

这是我展示概念证明的示例小提琴：

http://jsfiddle.net/bryanray/h5osqq17/

另外，请记住，ajax POST 上的字段名称需要直接匹配控制器参数，以便 .NET 模型绑定正确连接。这是基于约定的。

Answer 2

我建议你在.FormData(form)中传递form：

var PerData = new FormData($('#fm')[0]); // pass the form here.
self.save = function () {
   // use ajax as is but remove the append to form data.
};