Как пройти FormData (FileUpload) через JQuery AJAX вместе с MVC модели

Question

Мой сценарий:

  //FILE UPLOAD 
      var formData = new FormData(); 
      var totalFiles = document.getElementById("FileUpload").files.length; 
      for (var i = 0; i < totalFiles; i++) { 
       var file = document.getElementById("FileUpload").files[i]; 

       formData.append("FileUpload", file); 
      } 

      $.ajax({ 
       type: "POST", 
       url: BASE_URL + "/BEHome/AddImgSlide/", 
       dataType: 'json', 
       data: $('#ImgSlideForm').serializeArray(), //SEND MODEL 
       beforeSend: function (xhr) { 
        //do something 
       }, 
       success: function (data) { 
        //do something 
       }, 
       error: function (data) { 
        //do something 
       } 
      }); 

Мой контроллер:

void AddImgSlide(ImageSlideModel model) 
{ 
    //do something 
} 

Я пытаюсь передать FormData вместе с $ ('# ImgSlideForm '). SerializeArray(), но не знаю, как это сделать.

Любая помощь будет оценена

Answer 1

Вы можете попробовать просто передать форму в constuctor FormData и отправить его в качестве данных

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

     $.ajax({ 
      type: "POST", 
      url: BASE_URL + "/BEHome/AddImgSlide/", 
      dataType: 'json', 
      data: formData, 
      contentType: false, 
      processData: false, 
      beforeSend: function (xhr) { 
       //do something 
      }, 
      success: function (data) { 
       //do something 
      }, 
      error: function (data) { 
       //do something 
      } 
     }); 

Answer 2

Вы можете отправить как данные модели и файл в то же самое время, используя FormData как в этом примере:

<form id="create-form" > 
       Name: <input id="Name" type="text" name="Name"> 
      <br /> 
       Password: <input id="Edit-Password" type="password" name="Password"> 
       <br /> 
      <div> 
       <div>Upload Image</div> 
       <div> 
        <input type="file" name="UploadImage" id="UploadImage"> 
       </div> 
      </div> 
      <input type="hidden" name="ImageId" id="ImageId" value="" /> 
      <input type="hidden" name="UserId" id="UserId" value="" /> 
     <input type="submit" id="SubmitBtn" /> 
    </form> 
    <script> 
     $(document).ready(function(){ 
      var formdata = new FormData(); 
      var fileInput = document.getElementById("UploadImage"); 
      formdata.append('Name', $('#Name').val()); 
      formdata.append('Password', $('#Password').val()); 
      if (fileInput.files.length > 0) { 
        formdata.append(fileInput.files[0].name, fileInput.files[0]); 
       } 
      $("#SubmitBtn").click(function(e){ 
        e.preventDefault(); 

        $.ajax({ 
         type: "POST", 
         url: BASE_URL + "/BEHome/AddImgSlide/", 
         dataType: 'json', 
         data: formdata , 
         contentType: false, 
         processData: false, 

         success: function (data) { 
         //do something 
         }, 
         error: function (data) { 
        //do something 
         } 
        }); 
      }); 
     }); 
    </script>