Ajax FileUpload & JQuery formData in ASP.NET MVC

问题:

I have some problem with posting formData to server side action method. Because ajax call doesn't send files to server, I have to add file uploader data to formData manually like this:

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

I wrote jQuery function that need to post form data to server using ajax call. It's works but posted formData in server side is always null!

this is my script:

Edit 1: This is the action method in controller:

        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);             }         } 

Edit 2: Cshtml view file content:

@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             
         
     } 

Any tips, link or code example would be useful.
Thank you in advance!

回答1:

Instead of Jquery Ajax you could use