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

This works for me !!

Your script with changes

 function SubmitButtonOnclick() {         var formData = new FormData();         var file = document.getElementById("imageFile").files[0];         var file1 = document.getElementById("coverFile").files[0];         formData.append("imageFile", $("#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);             }         });     } 

回答2:

I was able to upload file through jquery using the iframe, I explained the same in my blog post, please follow the link to get the answer.

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

回答3:

     $("#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];          }       } 

文章来源: Ajax FileUpload & JQuery formData in ASP.NET MVC