如何通过asp.net mvc中的ajax json一起发送数据和图像

以前，我只需要创建一个只包含要发送到操作而不是图像的数据的表单，现在，我遇到了将数据和图像一起发布到操作的要求。 我不知道如何将图像附加到数据中，以便我可以让它继续前进。

这就是我如何将数据和图像一起发布但我在行动中收到null ：

HTML

我知道如何获取输入类型的文本数据并通过ajax请求和json格式发送它并将其保存到数据库，但是当它以json格式通过ajax请求获取数据和图像时，我得到了没有关于如何做到这一点的线索。

JS

 var empdata = { "SystemCode": "", "EmployeeCode": "" }; empdata.EmployeeCode = $("#EmployeeCode").val(); empdata.SystemCode = $("#SystemCode").val(); var data = new FormData(); var files = $("#profilePic").get(0).files; data.append("Image", files[0]); 

阿贾克斯

 $.ajax({ url: '/EmployeeMasterA/Create', headers: headers, data: JSON.stringify({ employeeMasterA: empdata, profilePic: data }), type: 'POST', dataType: 'json', contentType: 'application/json', traditional: true, success: function (result) { if (result.Success == "1") { window.location.href = "/EmployeeMasterA/Index"; } else { alert(result.ex); } } }); 

并Create动作：

 [HttpPost] public ActionResult Create([Bind(Include = "SystemCode,EmployeeCode")] EmployeeMasterA employeeMasterA, HttpPostedFileBase profilePic) { var pic = System.Web.HttpContext.Current.Request.Files["Image"]; } 

在上面的代码中， pic变量为null 。 我的问题是：

从表单中获取数据+图像的正确方法是什么，并通过ajax请求将其发送到操作？ 非常感谢任何帮助:)

更新

在提到liran的答案之后，我通过这样编辑代码来尝试绑定：

JS

 var empbind = { "profilePic" : "", "employeeMasterA" : "" }; // Created empdata and data (image) object as mentioned above empbind.employeeMasterA = empdata; empbind.profilePic = data; var empbindjson = JSON.stringify(empbind); 

并更改了Ajax data参数，如下所示：

 $.ajax({ . . data: empbindjson, . . }); 

并更改了我的控制器操作：

 [HttpPost] public ActionResult Create([Bind(Include = "employeeMasterA,profilePic")] EmployeeBind bind) { var pic = System.Web.HttpContext.Current.Request.Files["Image"]; } 

employeeMasterA,profilePic都在上面代码的调试模式下收到null ，这是我的新绑定类：

 public class EmployeeBind { public EmployeeMasterA employeeMasterA { get; set; } public HttpPostedFileBase profilePic { get; set; } } 

好的，现在，我已经更改了我的代码以将其与profilePic绑定，是否有任何我做错的事情？ 因为create action bind参数对employeeMasterA和profilePic都包含null。

Answer 1

尝试更改需要工作的东西：

  $('#save').click(function () { var form = $("#yourForm"); var data = new FormData(); var files = $("#profilePic").get(0).files; data.append("Image", files[0]); $.each(form.serializeArray(), function (key, input) { data.append(input.name, input.value); }); $.ajax({ url: '/EmployeeMasterA/Create', data: data, type: 'POST', processData: false, contentType: false, success: function (result) { if (result.Success == "1") { window.location.href = "/EmployeeMasterA/Index"; } else { alert(result.ex); } } }); }); 

在Html中：

编辑：如果仍然无法工作，那么将EmployeeMasterA和HttpPostedFileBase绑定到同一个类，如：

  [HttpPost] public ActionResult Create([Bind(Include = "SystemCode,EmployeeCode")] VMNewClass bind) { var pic = System.Web.HttpContext.Current.Request.Files["Image"]; } public class VMNewClass{ public EmployeeMasterA employeeMasterA {get;set;} public HttpPostedFileBase profilePic {get;set;} } 

如果你不想这样做：

  $.each(form.serializeArray(), function (key, input) { data.append(input.name, input.value); }); 

你可以写：

 var data = new FormData(); var files = $("#profilePic").get(0).files; data.append("profilePic", files[0]); data.append("EmployeeCode", $("#EmployeeCode").val()); data.append("SystemCode", $("#SystemCode").val()); 

编辑我附在评论中的文章

控制器：

 [HttpPost] public ActionResult Create([Bind(Include = "SystemCode,EmployeeCode")] EmployeeMasterA employeeMasterA) { HttpPostedFileBase profilePic = Request.Files[0]; // your file }