Foros del Web » Programando para Internet » Jquery »

No envia imagen con form ajax

Estas en el tema de No envia imagen con form ajax en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/02/2018, 13:39
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 12 años, 8 meses
Puntos: 4
No envia imagen con form ajax

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:
Ver original
  1. $('#contact-us-button').on("click", function () {
  2.         var error = ValidationContactForm();
  3.         var formData = new FormData(this);
  4.  
  5.  
  6.  
  7.         if (error) {
  8.  
  9.  
  10.  
  11.  
  12.             $.ajax({
  13.                 type: "POST",
  14.                 url: "email-templates/contact.php",
  15.                 //data: $("#contact-form").serializeArray(),
  16.                 data: formData,
  17.                 success: function (result) {
  18.                     // Un-comment below code to redirect user to thank you page.
  19.                     //window.location.href="thank-you.html";
  20.  
  21.                     $('input[type=text],textarea').each(function () {
  22.                         $(this).val('');
  23.                     })
  24.                     /*$('input[name=file]').each(function () {
  25.                         $(this).val('');
  26.                     })*/                    
  27.                     $("#success-contact-form").html(result);
  28.                     $("#success-contact-form").fadeIn("slow");
  29.                     $('#success-contact-form').delay(400000).fadeOut("slow");
  30.                 }
  31.             });
  32.         }
  33.     });

A ver si alguien puede decir mas o menos por donde esta el error, saludos!
  #2 (permalink)  
Antiguo 21/02/2018, 16:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.594
Antigüedad: 17 años, 7 meses
Puntos: 1277
Respuesta: No envia imagen con form ajax

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 21/02/2018, 16:55
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 12 años, 8 meses
Puntos: 4
Respuesta: No envia imagen con form ajax

Buenas caricatos que tal,

No he caido en poner el form:

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

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

Saludos
  #4 (permalink)  
Antiguo 21/02/2018, 16:59
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 12 años, 8 meses
Puntos: 4
Respuesta: No envia imagen con form ajax

Cita:
Iniciado por franjgg Ver Mensaje
Buenas caricatos que tal,

No he caido en poner el form:

Código HTML:
Ver original
  1. <form id="contact-form" action="javascript:void(0)" method="post" enctype="multipart/form-data">
  2.                                     <div id="success-contact-form" class="no-margin-lr"></div>
  3.                                     <input type="text" name="categoria" id="categoria" placeholder="Category*" class="input-bg">
  4.                                     <input type="text" name="autor" id="autor" placeholder="Author*" class="input-bg">                                <input type="text" name="titulo" id="titulo" placeholder="Title*" class="input-bg">
  5.  
  6.                                     <input type="file" id="imagen" name="imagen"  class="input-bg btn border-radius-4 btn-black"/>
  7.                                    
  8.                                     <textarea name="description" id="description" placeholder="News" class="input-bg summernote" style=""></textarea>
  9.                                     <div class="g-recaptcha" data-sitekey="6LfhMUcUAAAAABVJbwm4v6ki29E1e48GN2_QO65X" style="margin-top: 20px !important;margin-bottom: 15px;"></div>
  10.                                     <button id="contact-us-button" type="submit" class="btn btn-small border-radius-4 btn-black">Save news</button>
  11.                                 </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
  #5 (permalink)  
Antiguo 21/02/2018, 17:02
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.594
Antigüedad: 17 años, 7 meses
Puntos: 1277
Respuesta: No envia imagen con form ajax

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 21/02/2018, 18:17
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 11 años, 6 meses
Puntos: 528
Respuesta: No envia imagen con form ajax

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
  #7 (permalink)  
Antiguo 22/02/2018, 10:40
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 12 años, 8 meses
Puntos: 4
Respuesta: No envia imagen con form ajax

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:
Ver original
  1. $('#contact-us-button-form').on("click", function () {
  2.  
  3.         var form_data = new FormData($('input[name^="media"]'));
  4.  
  5.         $.each($('input[name^="media"]')[0].files, function(i, file) {
  6.             form_data.append(i, file);
  7.         });
  8.  
  9.  
  10.         $.ajax({
  11.             type: 'POST',
  12.             cache: false,
  13.             processData: false,
  14.             contentType: false,
  15.             data: form_data,
  16.             url: 'email-templates/contact.php',
  17.  
  18.             success: function(data) {
  19.                             $("#success-contact-form").html(result);
  20.                             $("#success-contact-form").fadeIn("slow");
  21.                             $('#success-contact-form').delay(400000).fadeOut("slow");
  22.             }
  23.         });
  24.     });

Saludos y gracias de nuevo.

Etiquetas: ajax, envia, form
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:14.