No envia imagen con form ajax

[franjgg]

Buenas que tal,

Vereis tengo un formulario desde el cual envio unos campos de texto un textarea y una imagen el problema es que cuando he añadido para que envie la imagen no funciona, he modificado la funcion ajax para que envie la imagen pero nada, la funcion en cuestion esta:

Código Javascript:

$('#contact-us-button').on("click", function () {
        var error = ValidationContactForm();
        var formData = new FormData(this);
 
 
 
        if (error) {
 
 
 
 
            $.ajax({
                type: "POST",
                url: "email-templates/contact.php",
                //data: $("#contact-form").serializeArray(),
                data: formData,
                success: function (result) {
                    // Un-comment below code to redirect user to thank you page.
                    //window.location.href="thank-you.html";
 
                    $('input[type=text],textarea').each(function () {
                        $(this).val('');
                    })
                    /*$('input[name=file]').each(function () {
                        $(this).val('');
                    })*/                    
                    $("#success-contact-form").html(result);
                    $("#success-contact-form").fadeIn("slow");
                    $('#success-contact-form').delay(400000).fadeOut("slow");
                }
            });
        }
    });
 

A ver si alguien puede decir mas o menos por donde esta el error, saludos!

[caricatos]

Hola:

No entiendo de jQuery, pero sí un poco de formularios y javascript/html, y al no ver el formulario, no estoy seguro de que hayas puesto el atributo enctype (tampoco parece estar en tu código)... que para subir archivos debe ser multipart/form-data.

Saludos

[franjgg]

Buenas caricatos que tal,

No he caido en poner el form:

Código HTML:

<form id="contact-form" action="javascript:void(0)" method="post" enctype="multipart/form-data">
                                    <div id="success-contact-form" class="no-margin-lr"></div>
                                    <input type="text" name="categoria" id="categoria" placeholder="Category*" class="input-bg">
                                    <input type="text" name="autor" id="autor" placeholder="Author*" class="input-bg">                                <input type="text" name="titulo" id="titulo" placeholder="Title*" class="input-bg">
 
                                    <input type="file" id="imagen" name="imagen"  class="input-bg btn border-radius-4 btn-black"/>
                                    
                                    <textarea name="description" id="description" placeholder="News" class="input-bg summernote" style=""></textarea>
                                    <div class="g-recaptcha" data-sitekey="6LfhMUcUAAAAABVJbwm4v6ki29E1e48GN2_QO65X" style="margin-top: 20px !important;margin-bottom: 15px;"></div>
                                    <button id="contact-us-button" type="submit" class="btn btn-small border-radius-4 btn-black">Save news</button>
                                </form>
 

En principio como dices no tinia puesto el enctype, pero lo coloque despues con el mismo resultado.

Saludos

[franjgg]

Iniciado por franjgg

Buenas caricatos que tal,

No he caido en poner el form:

Código HTML:

<form id="contact-form" action="javascript:void(0)" method="post" enctype="multipart/form-data">
                                    <div id="success-contact-form" class="no-margin-lr"></div>
                                    <input type="text" name="categoria" id="categoria" placeholder="Category*" class="input-bg">
                                    <input type="text" name="autor" id="autor" placeholder="Author*" class="input-bg">                                <input type="text" name="titulo" id="titulo" placeholder="Title*" class="input-bg">
 
                                    <input type="file" id="imagen" name="imagen"  class="input-bg btn border-radius-4 btn-black"/>
                                    
                                    <textarea name="description" id="description" placeholder="News" class="input-bg summernote" style=""></textarea>
                                    <div class="g-recaptcha" data-sitekey="6LfhMUcUAAAAABVJbwm4v6ki29E1e48GN2_QO65X" style="margin-top: 20px !important;margin-bottom: 15px;"></div>
                                    <button id="contact-us-button" type="submit" class="btn btn-small border-radius-4 btn-black">Save news</button>
                                </form>
 

En principio como dices no tinia puesto el enctype, pero lo coloque despues con el mismo resultado.

Decir que como está, envia el texto pero no la imagen.

Saludos

[caricatos]

Hola:

Verás, estoy seguro de que se asomará alguno de los buenos colaboradores de este foro y te ayudarán, pero para que lo examines, te paso un apunte sin jQuery que funciona: Subir archivos con Ajax.

Saludos

[ocp001a]

De forma "natural", jquery no va a enviar un archivo de la misma forma que se envía un campo de texto.

Básicamente necesitas agregar los archivos a los datos del formulario.

En esta url puedes ver un poco más de información:
https://stopbyte.com/t/how-to-sendin...jquery-ajax/58

[franjgg]

Buenas, gracias a ambos por la información,

He empezado por el hilo de ocp001a y mi función a quedado:

Pero siguue sin funcionar, he probado a porner " $("#success-contact-form").fadeIn("slow");" justo despues de la llamada a la funcion y muestra el mensaje pero si lo coloco después de "var form_data = new FormData($('input[name^="media"]'));" ya no muestra nada, he hecho esto por que tenia la sospecha esta linea que he intado anteriormente y cuando la escribo por alguna razon no funciona.

Código Javascript:

$('#contact-us-button-form').on("click", function () {
 
        var form_data = new FormData($('input[name^="media"]'));
 
        $.each($('input[name^="media"]')[0].files, function(i, file) {
            form_data.append(i, file);
        });
 
 
        $.ajax({
            type: 'POST',
            cache: false,
            processData: false,
            contentType: false,
            data: form_data,
            url: 'email-templates/contact.php',
 
            success: function(data) {
                            $("#success-contact-form").html(result);
                            $("#success-contact-form").fadeIn("slow");
                            $('#success-contact-form').delay(400000).fadeOut("slow");
            }
        });
    });
 

Saludos y gracias de nuevo.