带有id的jQuery ajax上传文件

我使用ASP.NET MVC5。 我的目标是使用jQuery ajax上传文件。 成功后，返回表格中上传文件的部分视图。 当我单步执行jQuery代码时，id和文件是正确的，但是当进入Action时，两个参数都为null。 这是我的代码：

控制者的行动：

[HttpPost] public ActionResult AddAttachments(string id, IEnumerable files) { if (files != null) { //save files } var cardKey = db.CardKeys.Single(s => s.CardKeyID == Convert.ToInt32(id)); var attachments = cardKey.Request.Attachments; return PartialView("_AttachmentsTable",attachments); } 

jQuery的：

 $(function () { var table = $("#attachmentTable").DataTable(); var path = MySettings.addAttachmentURL; $("#btnAddAttachment").click(function (event) { event.preventDefault(); var formData = new FormData(); var cardKeyID = $("#CardKeyID").val(); var formData = $.each($("#files")[0].files, function (i, file) { formData.append('file-' + i, file); }); console.log("formData = " + formData); $.ajax({ type: "POST", url: path, contentType: false, processData:false, cache:false, data: {id:cardKeyID,files: formData }, success: function (partialResult) { $("#tableData").html(partialResult); table = $("#attachmentTable").DataTable(); }, error: function (jqXHR, textStatus, errorThrown) { $("#message").html(JSON.stringify(jqXHR).toString()); alert("AJAX error: " + textStatus + ' : ' + errorThrown); } }); }); }); 

剃刀视图：

 
 
Add Attachments
 
 
 
 @Html.Label("File Upload", new { @class = "control-label col-md-6" }) 
 
  
 
 
 
 
 @Html.Label("File Description", new { @class = "control-label col-md-6" }) 
 @Html.TextBox("FileDescription") 
 
 
 
 
 @Html.Label("Comment", new { @class = "control-label col-md-6" }) 
 @Html.TextBox("Comment") 
 
 
 
 
 @Html.Partial("_AttachmentsTable",Model.Request.Attachments) 
  

Answer 1

问题是因为您需要将FormData直接提供给$.ajax的data属性，而不是在对象内，因为它将被编码。 如果需要向请求添加数据，请将其附加到FormData对象：

 var formData = new FormData(); var cardKeyID = $("#CardKeyID").val(); var formData = $.each($("#files")[0].files, function (i, file) { formData.append('file-' + i, file); }); formData.append('id', cardKeyID); $.ajax({ data: formData, // other properties here... }); 

然后在控制器中，您需要直接从Request检索数据：

 [HttpPost] public ActionResult AddAttachments() { var id = Request.Params["id"]; foreach(var file in Request.Files) { //save files } var cardKey = db.CardKeys.Single(s => s.CardKeyID == Convert.ToInt32(id)); var attachments = cardKey.Request.Attachments; return PartialView("_AttachmentsTable",attachments); } 

请注意，如果form元素包含您要在请求中发送的所有字段，则可以避免使用$.each并且必须直接追加并简单地使用：

 var formData = new FormData($('form')[0]);