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);
});
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 conappend