ASP.NET MVC中的Ajax FileUpload＆JQuery formData

Question

我在將formData發佈到服務器端操作方法時遇到了一些問題。由於AJAX調用不將文件發送到服務器，我有文件上傳數據添加到formData手動像這樣：

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

我寫了jQuery的功能需要使用Ajax調用表單數據發佈到服務器。 它的工作，但在服務器端張貼formData始終爲空！

這是我的腳本：

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

編輯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" })) 
    { 

     <div> 
      <button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button> 
     </div> 

     <input type="hidden" name="username" id="username" value="@Model.Username"/> 

     <fieldset> 
      <legend>Edit Photos</legend> 
      <div> 
       Select profile picture: 
       <input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" /> 
       @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span> 
      </div> 
      <div> 
       Select cover picture: 
       <input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" /> 
       @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span> 
      </div> 
     </fieldset> 
    } 

任何提示，鏈接或代碼示例都會很有用。
預先感謝您！

Answer 1

相反jQuery的阿賈克斯，你可以使用

<script> 
      function SubmitButtonOnclick() 
      { 
       var formData= new FormData(); 
       var imagefile=document.getElementById("imageFile").files[0]; 
       var coverfile=document.getElementById("coverFile").files[0]; 
       formData.append("imageFile",imageFile); 
       formData.append("coverFile",coverFile); 
       var xhr = new XMLHttpRequest(); 
       xhr.open("POST", "/Profile/EditProfile", true); 
       xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false); 
       xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false); 
       xhr.send(formData); 

      } 

     function UploadComplete(evt) { 
     if (evt.target.status == 200) 
       alert("Logo uploaded successfully."); 

     else 
       alert("Error Uploading File"); 
     } 

    function UploadFailed(evt) { 
     alert("There was an error attempting to upload the file."); 

    } 
</script> 

這對我的作品！

您與變化

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

Answer 2

我能夠使用的iframe通過jQuery來上傳文件腳本，我在我的博客中說明的相同，請按照鏈接才能得到答案。

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

Answer 3

<input type="file" id="picfile" name="picf" /> 
     <input type="text" id="txtName" style="width: 144px;" /> 
$("#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]; 
     } 


    }