ASP.NET MVC中的Ajax FileUpload和JQuery formData

将formData发布到服务器端操作方法时formData问题。 因为ajax调用不会将文件发送到服务器，所以我必须手动将文件上载器数据添加到formData ，如下所示：

 var formData = new FormData(); formData.append("imageFile", $("#imageFile").file); formData.append("coverFile", $("#coverFile").file); 

我编写了jQuery函数，需要使用ajax调用将表单数据发布到服务器。 它的工作原理，但在服务器端发布的formData始终为null！

这是我的脚本：

   function SubmitButtonOnclick() { var formData = new FormData(); formData.append("imageFile", $("#imageFile").file); formData.append("coverFile", $("#coverFile").file); $.ajax({ type: "POST", url: '@Url.Action("EditProfile", "Profile")', data: formData, dataType: 'json', contentType: "multipart/form-data", processData: false, success: function (response) { $('#GeneralSection').html(response.responseText); }, error: function (error) { $('#GeneralSection').html(error.responseText); } }); }  

编辑1：这是控制器中的操作方法：

  public ActionResult EditProfile(ProfileGeneralDescription editedModel, HttpPostedFileBase imageFile, HttpPostedFileBase coverFile, string postOwnerUser) { try { if (postOwnerUser == User.Identity.Name) { // edit codes... var result = GetProfileGeneralDescription(postOwnerUser); return PartialView("_GeneralProfile", result); } else { var error = new HandleErrorInfo( new Exception("Access Denied!"), "Profile", EditProfile return PartialView("~/Views/Shared/Error.cshtml", error); } } catch (Exception ex) { var error = new HandleErrorInfo(ex, "Profile", EditProfile return PartialView("~/Views/Shared/Error.cshtml", error); } } 

编辑2： Cshtml视图文件内容：

 @model Website.Models.ViewModel.Profile @using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions() { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "GeneralSection" }, new { enctype = "multipart/form-data" })) { 
 Submit 
  
 
Edit Photos
 
 Select profile picture:  @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)Remove profile photo 
 
 Select cover picture:  @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)RemoveCover 
 
 } 

任何提示，链接或代码示例都很有用。
先感谢您！

Answer 1

而不是Jquery Ajax你可以使用

这对我有用!!

你的脚本有变化

  function SubmitButtonOnclick() { var formData = new FormData(); var file = document.getElementById("imageFile").files[0]; var file1 = document.getElementById("coverFile").files[0]; formData.append("imageFile", file); formData.append("coverfile", file1); $.ajax({ type: "POST", url: '@Url.Action("EditProfile","Default1")', data: formData, dataType: 'json', contentType: false, processData: false, success: function (response) { $('#GeneralSection').html(response.responseText); }, error: function (error) { $('#GeneralSection').html(error.responseText); } }); } 

Answer 2

    $("#btncatsave").click(function () { var Name = $("#txtName").val(); var formData = new FormData(); var totalFiles = document.getElementById("picfile").files.length; var file = document.getElementById("picfile").files[0]; formData.append("FileUpload", file); formData.append("Name", Name); $.ajax({ type: "POST", url: '/Category_Subcategory/Save_Category', data: formData, dataType: 'json', contentType: false, processData: false, success: function (msg) { alert(msg); }, error: function (error) { alert("errror"); } }); }); [HttpPost] public ActionResult Save_Category() { string Name=Request.Form[1]; if (Request.Files.Count > 0) { HttpPostedFileBase file = Request.Files[0]; } } 

Answer 3

我能够使用iframe通过jquery上传文件，我在我的博客文章中解释过相同的内容，请点击链接获取答案。

http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html