0

compañeros. Gracias por ingresar a mi post.

Mi problema es que tengo un formulario, con diferentes tipos (text, number y files). El problema, es que el formulario se me envía perfectamente con esta línea de código:

var data=$("#formulario").serialize();

El problema, es que no me toma la imagen. Sé que este código no me funciona, pero he intentado con códigos de internet, pero no ha funcionado.

Este es el formulario:

<form id="formulario">
    <input type="number" name="cod_prod">
    <input type="text" name="nombre_prod">
    <input type="file" name="referencia_prod">
    <button id="subir">Subir.</button>
</form>

Este es mi código AJAX:

$("#subir").click(function(event) {
            /*Con esto evitamos que se recargue la página.*/
            event.preventDefault();
            var data=$("#formulario").serialize();
            $.ajax({                        
                method:"POST",                 
                url:"subir_fichas.php",
                data:data,
                success: function(data){
                    obtener_datos();     
                }
            });
        })

Sólo necesito que me tome todos los datos y la imagen para subirla a MySql.

2
  • hice una pregunta similar hace unos días... link Commented el 17 feb. 2019 a las 17:00
  • Hola. Te recomiendo que postees el código de subir_fichas.php y de obtener_datos() para poder obtener una respuesta que te sea de ayuda. Commented el 17 feb. 2019 a las 17:02

1 respuesta 1

0

el primer punto importante es que se debe indicar al formulario que debe manejar archivos:

<form id="formulario" enctype="multipart/form-data">

y luego en jquery es necesario hacer uso de FormData, que es la forma en la que ajax envia archivos:

$(document).ready(function () {
    $("#subir").click(function () {
        var url = "subir_fichas.php";
        var form = $('#formulario')[0];
        var formData = new FormData(form);
        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            contentType: false,
            processData: false,
            success: function (data){
                // cosas por hacer si exito
            },
            error: function() {
                //cosas por hacer si error
            }
        });
        return false;
    });
});
4
  • Ya lo intenté, pero al hacer Alert(formData) me muestra el recuadro: [object FormData]
    – Saco04
    Commented el 17 feb. 2019 a las 17:21
  • eso se debe a que que se envia un objeto, lo creas al hacer var formData = new FormData(form); no entiendo para que quieres hacer un alert, de cualquier modo ahora ese objeto tiene contenido al formulario incluyendo ek archivo Commented el 17 feb. 2019 a las 17:54
  • Sí, ya pude. Muchas gracias a todos los que aportaron. Ahora, el problema es que al hacer click en enviar, me envía a la página principal.
    – Saco04
    Commented el 17 feb. 2019 a las 22:49
  • eso es simple agrega ` event.preventDefault();` como lo tenias al principio Commented el 18 feb. 2019 a las 3:13

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.