2

Tengo un formulario y para procesarlo hago lo siguiente:

formdatax = {
    tipo_reg: "producto",
    producto: $("#producto").val(),
    new_categoria: new_categoria,
    categoria: categoria,
    new_marca: new_marca,
    marca: marca,
    ubicacion: $("#ubicacion").val(),
    precio_costo : $("#precio_costo").val(),
    precio_minimo : $("#precio_minimo").val(),
    precio_mayor: $("#precio_mayor").val(),
    precio_venta: $("#precio_venta").val(),
    precio_consumidor: $("#precio_consumidor").val(),
    codigo_barras: $("#codigo_barras").val(),
    codigo_producto: $("#codigo_producto").val(),
    codigo_interno: $("#codigo_interno").val()
};

Eso es la data y ahora para procesarlo uso esto:

$.post("procesos/registrar.php",formdatax).done(function(respp){
 alert(respp);
 //location.reload();
});

Hasta allí todo bien, el problema surge en que quiero subir una imagen y anexarlo al post.

Mi input:

<input id="foto_producto" type="file" name="fotoproducto"/>

Intenté con esto:

var formData = new FormData();
var files = $('#foto_producto')[0].files[0];
formData.append('file',files);

Y a mi post le envío así:

$.post("procesos/registrar.php",formdatax+formData).done(function(respp){
     alert(respp);
     //location.reload();
    });

Pero el php no detecta la imagen.

3
  • Si identificas el formulario y lo pasas en parámetro al constructor de FormData éste lo serializa directamente, no tienes que meterle ningún dato a mano, esa es precisamente una de las ventajas de usar FormData, eso incluye también a los inputs de tipo file.
    – A. Cedano
    Commented el 12 ago. 2021 a las 19:01
  • el problema es que yo valido en el front algunos campos y de acuerdo a ello muestro otros campos Commented el 12 ago. 2021 a las 19:04
  • No entiendo qué quieres decir con eso, ¿qué algunos de los datos que guardas en formdatax no están en el formulario y/o que el formulario tiene datos que no te interesan? Puedes serializar el formulario y si hay datos adicionales agregarlos con append
    – A. Cedano
    Commented el 12 ago. 2021 a las 19:08

1 respuesta 1

2

Al tratar de enviar ambos objetos con formdatax+formData, Javascript intentará concatenarlos, quedando algo como [Object Object][Object Object]. Solo puedes enviar un objeto.

De preferencia usa FormData y, si no quieres complicarte modificando todo tu código actual, basta con:

let formData = new FormData();
// Recorrer el objeto actual
Object.keys(formdatax).forEach(key => {
    // Agregar cada elemento a formData
    formData.append(key, formdatax[key]);
});

// Finalmente agregas el archivo
let files = $('#foto_producto')[0].files[0];
formData.append('file',files);

// Ejecutas la petición AJAX enviando solo formData
$.post("procesos/registrar.php", formData).done(function(respp){
    alert(respp);
    //location.reload();
});

Con esto ya debería funcionar, aunque puedes simplificar y optimizar con la sugerencia de @A.Cedano en comentarios, enviando todo el formulario:

let formData = new FormData($('#id-de-formulario')[0]));
$.post("procesos/registrar.php", formData).done(function(respp){
    alert(respp);
    //location.reload();
});

Así se envían todos los campos del formulario, no importa si ya existían o los agregaste posteriormente; a menos que los hayas colocado fuera del formulario.

Opción con Javascript puro

Por petición en comentarios, si estás usando jQuery solo por las peticiones AJAX y la forma de seleccionar campos, puedes ahorrarte unos cuantos KB de descarga en la página al omitir esa librería y hacerlo con Javascript puro:

Para crear el objeto JSON actual, remplazas $ por document.querySelector y .val() por .value

formdatax = {
    tipo_reg: "producto",
    producto: document.querySelector("#producto").value,
    new_categoria: new_categoria,
    categoria: categoria,
    new_marca: new_marca,
    marca: marca,
    ubicacion: document.querySelector("#ubicacion").value,
    precio_costo : document.querySelector("#precio_costo").value,
    precio_minimo : document.querySelector("#precio_minimo").value,
    precio_mayor: document.querySelector("#precio_mayor").value,
    precio_venta: document.querySelector("#precio_venta").value,
    precio_consumidor: document.querySelector("#precio_consumidor").value,
    codigo_barras: document.querySelector("#codigo_barras").value,
    codigo_producto: document.querySelector("#codigo_producto").value,
    codigo_interno: document.querySelector("#codigo_interno").value
};

La forma de crear el objeto FormData no cambia, pero sí cómo agregas el archivo:

let formData = new FormData();
// Finalmente agregas el archivo
let files = document.querySelector('#foto_producto').files[0];
formData.append('file',files);

Si creas el objeto desde el formulario:

let formData = new FormData(document.querySelector('#id-de-formulario'));

La petición AJAX es la que tiene más cambios, pero la API fetch es muy sencilla:

// Ejecutas la petición AJAX enviando solo formData
fetch('procesos/registrar.php', {
    method: 'POST',    // Debes especificar el método
    body: formData     // Y agregar los datos que deseas enviar
}).then(resp => {
    // resp es la respuesta inicial del servidor
    // analizar si fue correcta:
    if(resp.ok) {
        // La respuesta fue correcta
        // Aquí puedes interpretar el resultado como JSON, texto, etc.
        // Supongamos que el servidor devuelve texto o HTML
        return resp.text();
    }
    // La respuesta no fue correcta, lanzar excepción
    throw resp.statusText;
}).then(data => {
    // Técnicamente, aquí finaliza la petición, después de interpretar la respuesta
    // y recibes el resultado de resp.text()
    console.log(data);
}).catch(error => {
    // Aquí recibirás todos los errores, incluida la excepción del primer .then()
    console.log('Error en petición AJAX: ' + error.message);
});
5
  • 1
    que pasa si son múltiples archivos que deseo enviar??? y otra cosa no veo como recibes en php los archivos enviados por ese metodo...
    – user46896
    Commented el 12 ago. 2021 a las 20:14
  • 1
    podrías explicar lo mismo sin jquery con javascript vanilla o emacs para que el OP Vea la diferencia?
    – user46896
    Commented el 12 ago. 2021 a las 20:14
  • 1
    @FranciscoNúñez-TodoPoderoso, si quieres enviar múltiples archivos, basta con crear el objeto FormData con el formulario como parámetro. Si se crea manualmente, se debe recorrer la propiedad files para agregar uno a uno. En PHP los vas a recibir como siempre en $_FILES.
    – Triby
    Commented el 12 ago. 2021 a las 20:29
  • 1
    @FranciscoNúñez-TodoPoderoso, servido, joven... opción sin jQuery agregada.
    – Triby
    Commented el 12 ago. 2021 a las 20:47
  • Excelente brother, eres un crack Commented el 13 ago. 2021 a las 4:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.