Envío de formulario de Jquery ajax que contiene archivos

Tengo una forma muy larga que contiene archivos adjuntos:

así es como se ve mi formulario:

enter image description here

El formulario será enviado a esta acción:

[HttpPost] public ActionResult AddReceivingConfirm(DTOreceiving entry,IEnumerable fileUpload) { return PartialView(); } 

a través de una llamada ajax que es:

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

todo es vinculante a la perfección, excepto el IEnumerable que siempre resulta en null ,

la parte del archivo de mi formulario se hace así:

   Attachment #1:       Attachment #2:       Attachment #3:      

He intentado la versión de corchetes y etc. pero no se unirá.

Después de una hora de investigación, he leído que no es posible (?) Hacer la publicación de archivos convencionalmente mediante el uso de Ajax a menos que sea un iframe. No estoy seguro de cuál será mi acción, quiero evitar el uso de un plugin, así que quiero saber si hay alguna forma “hacky” de acceder a los archivos directamente desde mi formulario.

esta es mi forma:

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

Lamentablemente, el método jQuery serialize() no incluirá elementos de archivos de entrada. Por lo tanto, sus archivos no se incluirán en el valor serializado.

Lo que debería hacer es crear un objeto FormData , anexar los archivos a eso. Necesita agregar los valores del campo de formulario también a este mismo objeto FormData. Simplemente puede recorrer todo el campo de entrada y agregarlo. Además, en la llamada ajax, debe especificar valores de propiedad processData y contentType en 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); } }); }); 

Parece que su $.ajax necesita contentType: false para evitar que se inserte un encabezado de tipo de contenido incorrecto.

Además, si estoy leyendo los documentos ( https://api.jquery.com/serialize/ ) correctamente .serialize omite las entradas del archivo …

Esta respuesta también parece útil ¿Cómo puedo subir archivos de forma asíncrona?