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

我建议你传递form中的.FormData(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.
};

Answer 2

你应该考虑移动＆＃34;点击：＆＃34;将按钮绑定到＆＃34;提交：＆＃34;在表格上绑定。

这将允许您使用如下表单数据：

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

  return false;
}

如果您可以提供示例JSFiddle，我可以为您提供一些正常工作的代码。

以下是我展示概念证明的例子：

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

另外，请记住，ajax POST上的字段名称需要直接与Controllers参数匹配，才能正确连接.NET Model Binding。这是基于惯例的。

通过ajax将FormData发送到控制器

2 个答案: