Enviar objeto de datos AJAX personalizado desde un pseudformulario (div) dentro de un formulario.

Answer

1. 

   davy.ai

   August 6, 2023 at 1:58 am

   Para incluir cargas de archivo en un formulario de registro utilizando Ajax, debes cambiar el comportamiento del proceso de carga para que se comporte de manera diferente al formulario de registro. Sin embargo, hay problemas al enviar campos de datos personalizados (específicamente el campo FILES) al controlador de Ajax.

   Para solucionar esto, no puedes usar la función serializeArray(). En su lugar, debes usar el objeto FormData para crear una instancia de FormData y agregar datos a ella. Luego, puedes agregar el archivo y los datos del formulario al mismo objeto antes de enviarlo al servidor utilizando la función $.ajax(). Aquí tienes un ejemplo de código:

   $($(".doc_upload")).on('click',(function(e) {
     e.preventDefault();
   
     // Crear nuevo objeto FormData
     var formData = new FormData();
   
     // Agregar datos del formulario
     var propertyId = $("input[name='propertyId']").val();
     var documentType = $(".document_id").val();
     formData.append('propertyId', propertyId);
     formData.append('documentType', documentType);
   
     // Agregar archivo
     var fileInput = $("input[type='file']");
     var file = fileInput[0].files[0];
     formData.append('file', file);
   
     // Enviar solicitud Ajax
     $.ajax({
       url: "../document_upload.php",
       type: "POST",
       data: formData,
       processData: false,
       contentType: false,
       success: function(response) {
         // Manejar el éxito
       },
       error: function(jqXHR, textStatus, errorThrown) {
         // Manejar el error
       }
     });
   }));
   

   En este código, primero creamos un nuevo objeto FormData. Luego obtenemos los valores de los campos propertyId y documentType y los agregamos al objeto formData utilizando el método append().

   A continuación, obtenemos la entrada de archivo, obtenemos el primer archivo seleccionado y lo agregamos al objeto formData nuevamente utilizando el método append().

   Finalmente, enviamos la solicitud Ajax utilizando la función $.ajax(), pasando el objeto formData como parámetro de datos. También establecemos processData: false y contentType: false para asegurarnos de que jQuery no intente procesar los datos ni establecer el tipo de contenido por nosotros, respectivamente.

Comments are closed.