Jquery формы Ajax Submit, который содержит файлы

Question

у меня есть очень длинная форма, которая содержит файлы прикрепление:

это как моя форма выглядит следующим образом:

Форма будет представлена ​​на эту акцию :

[HttpPost] 
public ActionResult AddReceivingConfirm(DTOreceiving entry,IEnumerable<HttpPostedFileBase> fileUpload) 
    { 

     return PartialView(); 
    } 

через Ajax вызова, который является:

$(document).on('click', 'input[type="submit"].genericSubmit', function() {     //generic function for ajax submit of ANY FORMS t 

     if (!$("form#ValidateForm").valid()) { 
       return false; 
     }; 


     var frmData = $('.genericForm').serialize(); 
     var frmUrl = $('.genericForm').attr('action'); 
      $.ajax({ 
       type: 'post', 
       url: frmUrl, 
       data: frmData, 

       success: function (e) { 
       $('#target').html(e); 
      } 
     }); 
     return false; 
}); 

все прекрасно связывание кроме IEnumerable<HttpPostedFileBase>, которая всегда приводит к null,

файл часть моей формы делается так:

<tr> 
<td>Attachment #1: </td> 
<td colspan="3"> 
    <input id="file1" type="file" name="fileUpload" /> 
</td> 

</tr> 

    <tr> 
    <td>Attachment #2: </td> 
<td colspan="3"> 
    <input id="file2" type="file" name="fileUpload" /> 
</td> 

</tr> 

    <tr> 
    <td>Attachment #3: </td> 
<td colspan="3"> 
    <input id="file3 "type="file" name="fileUpload" /> 
</td> 

</tr> 

Я попробовал версию скобки и т.д., но он выиграл Не связывайся.

После часа исследования я прочитал, что это невозможно (?)), Чтобы обычная публикация файлов использовалась с использованием Ajax, кроме iframe. Я не уверен, что мое действие будет, я вроде бы хочу избежать использования плагина, поэтому я хочу знать, есть ли какие-то «хакерские» способы доступа к файлам непосредственно из моей формы?

это моя форма:

using (Html.BeginForm("AddReceivingConfirm", "Wms", FormMethod.Post, new { id = "ValidateForm", @class = "genericForm" , enctype="multipart/form-data"})) 

Answer 1

К сожалению, метод JQuery serialize() не будет включать в себя элементы входного файла. Поэтому ваши файлы не будут включены в сериализованное значение.

Что вы должны сделать, это создать объект FormData, добавить файлы к нему. Вам также нужно добавить значения поля формы к этому же объекту FormData. Вы можете просто пропустить все поле ввода и добавить его. Кроме того, в вызове ajax вам необходимо указать processData и contentType значениям свойств до false.

$(document).on('click', 'input[type="submit"].genericSubmit', function(e) { 

    e.preventDefault(); // prevent the default submit behavior. 

    var fdata = new FormData(); 

    $('input[name="fileUpload"]').each(function(a, b) { 
     var fileInput = $('input[name="fileUpload"]')[a]; 
     if (fileInput.files.length > 0) { 
      var file = fileInput.files[0]; 
      fdata.append("fileUpload", file); 
     } 
    }); 

    // You can update the jquery selector to use a css class if you want 
    $("input[type='text'").each(function(x, y) { 
     fdata.append($(y).attr("name"), $(y).val()); 
    }); 

    var frmUrl = $('.genericForm').attr('action'); 
    $.ajax({ 
     type: 'post', 
     url: frmUrl, 
     data: fdata, 
     processData: false, 
     contentType: false, 
     success: function(e) { 
      $('#target').html(e); 
     } 
    }); 

}); 

Answer 2

Похоже ваши $.ajax потребности contentType: false, чтобы предотвратить заголовок плохого типа содержимого с вставкой.

Кроме того, если я читаю документацию (https://api.jquery.com/serialize/) правильно .serialize пропускает входы файлов ...

Этот ответ также кажется полезным How can I upload files asynchronously?