Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Barra de progreso al enviar formulario

Estas en el tema de Barra de progreso al enviar formulario en el foro de HTML en Foros del Web. Hola a todos! tengo un Formulario en el cual se pueden incluir varias fotografias para enviar a un correo electronico, todo funciona perfecto, el problema ...
  #1 (permalink)  
Antiguo 23/11/2015, 07:09
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 10 años, 1 mes
Puntos: 3
Barra de progreso al enviar formulario

Hola a todos!
tengo un Formulario en el cual se pueden incluir varias fotografias para enviar a un correo electronico, todo funciona perfecto, el problema es que cuando se cargan muchas fotografias al pulsar el boton enviar como es logico tarda mucho tiempo en enviar el formulario y da la sensacion de que la pagina se ha quedado colgada.

Alguien sabe como puedo mostrar una barra que muestre el porcentaje de envio del formulario?

he estado probando con <progress></progress> pero no se como adaptarlo al formulario, todos los ejemplos que he visto usan un boton de tipo "button" y mi boton es de tipo "submit"

también me conformaría con que al pulsar enviar me apareciera una imagen gif de carga.. cualquier cosa que indique al usuario que la pagina esta cargando y no se ha colgado.

agradeceria cualquier tipo de ayuda..

dejo el codigo por si sirve de algo
Saludos


-DOCUMENTO DE FORMULARIO-

Código HTML:
Ver original
  1. <form name="mail_frm" action="enviook.php" method="post" enctype="multipart/form-data">
  2. <p>De:
  3.  Remitente:
  4.  <input type"text" name="remitente" id="remitente" />
  5.  <br/><br/>
  6.   Asunto:
  7.  <input type"text" name="asunto" id="asunto" />
  8.  <br/><br/>
  9.  Adjuntar archivo:
  10.   <input type="file" name="archivo_fls"/> <br/><br/>
  11.   Adjuntar archivo dos:
  12.  <input type="file" name="archivodos"/> <br/><br/>
  13. </p>
  14. Mensaje: <br/>
  15.   <textarea name="mensaje_txa"></textarea>
  16.   <br/><br/>
  17.   Mensaje dos: <br/>
  18.   <textarea name="mensajedos_txa"></textarea>
  19.   <br/><br/>
  20.    TEXTO:
  21.   <input type"text" name="texto" id="texto" />
  22.   <br/><br/>
  23.   <input type="submit" name="button" id="enviar_btn" value="Enviar" />
  24.   <br/>
  25.  </p>
  26. <?php
  27. error_reporting (E_ALL ^ E_NOTICE ^ E_WARNING);
  28. if (isset ($_GET ["respuesta"])){
  29.     echo "<span>".$_GET["respuesta"]."</span>";
  30.     }
  31. ?>
  32. </form>
  33. </body>


-DOCUMENTO CON CODIGO PHP-

Código PHP:
Ver original
  1. <body>
  2.  
  3.  
  4. <?php
  5.  
  6. $mensaje= htmlspecialchars($_POST["mensaje_txa"]);
  7. $mensajedos= htmlspecialchars($_POST["mensajedos_txa"]);
  8. $texto= $_POST["texto"];
  9. $remi= $_POST["remitente"];
  10. $asunto= $_POST["asunto"];
  11. $archivo=  $_FILES["archivo_fls"]["tmp_name"];
  12. $destino=  $_FILES["archivo_fls"]["name"];
  13. $archivodos=  $_FILES["archivodos"]["tmp_name"];
  14. $destinodos=  $_FILES["archivodos"]["name"];
  15.  
  16.  
  17. $cabeceras = "MIME-Version: 1.0\r\n";
  18. $cabeceras .="Content-type: text/html; charset=iso-8859-1\r\n";
  19. $cabeceras .="From: $de \r\n";
  20.  
  21. if(move_uploaded_file($archivo,$destino)) {
  22. if(move_uploaded_file($archivodos,$destinodos)) {  
  23.    
  24.     //incluyo la clase phpmailer
  25.     include("class.phpmailer.php");
  26.     include("class.smtp.php");
  27.    
  28.     $mail = new PHPMailer();
  29.     $mail->IsSMTP();
  30.     $mail->SMTPAuth = true;
  31.     $mail->SMTPSecure = "ssl";
  32.     $mail->Host = "smtp.mundofimo.com";
  33.     $mail->Port = 465;
  34.     $mail->From = "[email protected]";
  35.     $mail->AddAddress ("[email protected]");
  36.     $mail->Username = "[email protected]";
  37.     $mail->Password = "**********";
  38.         $mail->Subject =("$remi");
  39.     $mail->WordWrap =50;
  40.     $mail->MsgHTML("Remitente: $remi<br>
  41.                     Asunto: $asunto<br>
  42.                     Mensaje: $mensaje<br>
  43.                     Mensajedos: $mensajedos<br>
  44.                     Texto: $texto");
  45.     $mail->AddAttachment($destino);
  46.     $mail->AddAttachment($destinodos);
  47.    
  48.     if($mail->Send()){
  49.         $respuesta =" El mensaje ha sido enviado correctamente";
  50.         }
  51.         else{
  52.         $respuesta = "el mensaje NO se pudo enviar";
  53.         $respuesta .= " Error ".$mail->ErrorINfo;
  54.             }
  55.             }
  56. }
  57.         else{
  58.             $respuesta ="ocurrio un error al subir el archivo adjunto ";
  59.             }
  60. header ("Location: nuevousuario.php?respuesta=$respuesta");
  61.  ?>
  62. </body>

Última edición por tonieet; 23/11/2015 a las 11:01
  #2 (permalink)  
Antiguo 24/11/2015, 11:54
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 10 años, 1 mes
Puntos: 3
Respuesta: Barra de progreso al enviar formulario

Nadie?? ningún valiente que me eche un cable??

solo necesito alguna manera de mostrar al usuario de la pagina que el formulario se esta cargando y que la pagina no se ha colgado..
  #3 (permalink)  
Antiguo 24/11/2015, 14:18
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 5 años, 10 meses
Puntos: 263
Respuesta: Barra de progreso al enviar formulario

Código Javascript:
Ver original
  1. function loader(){
  2. document.getElementById('loader').style.display = 'Block';
  3.  
  4. }

Código HTML:
Ver original
  1. <form onSubmit="loader(); return false">
  2. bla bla bla

alli cuando envias el form el js revela un loader gif que tendras previamente oculto, algo asi:

Código HTML:
Ver original
  1. <div id="loader" style="display:none"><img src="carpeta/loader.gif"></div>

eso seria todo!!
__________________
[email protected]
HITCEL
  #4 (permalink)  
Antiguo 25/11/2015, 09:34
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 10 años, 1 mes
Puntos: 3
Respuesta: Barra de progreso al enviar formulario

Cita:
Iniciado por xfxstudios Ver Mensaje
Código Javascript:
Ver original
  1. function loader(){
  2. document.getElementById('loader').style.display = 'Block';
  3.  
  4. }

Código HTML:
Ver original
  1. <form onSubmit="loader(); return false">
  2. bla bla bla

alli cuando envias el form el js revela un loader gif que tendras previamente oculto, algo asi:

Código HTML:
Ver original
  1. <div id="loader" style="display:none"><img src="carpeta/loader.gif"></div>

eso seria todo!!


hola xfxstudios! muchas gracias por responder!
he hecho lo que me has dicho y efectivamente al pulsar enviar me aparece el gif animado de carga, el problema es que el formulario no se envia

Ahora lo unico que hace al pulsar enviar es mostrar el gif sin enviar el formulario.. sabes por que puede ser?

gracias de antemano!

dejo el codigo tal cual lo tengo ahora.

Código HTML:
Ver original
  1. function loader(){
  2. document.getElementById('loader').style.display = 'Block';
  3.  }
  4. <form  name="mail_frm" action="enviook.php" method="post" enctype="multipart/form-data" onSubmit="loader(); return false">
  5. <p>De:
  6.  Remitente:
  7.   <input type"text" name="remitente" id="remitente" />
  8.   <br/><br/>
  9.  Asunto:
  10.   <input type"text" name="asunto" id="asunto" />
  11.   <br/><br/>
  12. Adjuntar archivo:
  13.   <input type="file" name="archivo_fls"/> <br/><br/>
  14.   Adjuntar archivo dos:
  15.    <input type="file" name="archivodos"/> <br/><br/>
  16. </p>
  17. Mensaje: <br/>
  18.   <textarea name="mensaje_txa"></textarea>
  19.   <br/><br/>
  20.   Mensaje dos: <br/>
  21.   <textarea name="mensajedos_txa"></textarea>
  22.   <br/><br/>
  23.    TEXTO:
  24.   <input type"text" name="texto" id="texto" />
  25.   <br/><br/>
  26.   <input type="submit" name="button" id="enviar_btn" value="Enviar" />
  27.   <br/>
  28.  </p>
  29. <?php
  30. error_reporting (E_ALL ^ E_NOTICE ^ E_WARNING);
  31. if (isset ($_GET ["respuesta"])){
  32.     echo "<span>".$_GET["respuesta"]."</span>";
  33.     }
  34. ?>
  35. </form>
  36.  
  37. <div id="loader" style="display:none"><img src="enviando.gif"></div>
  38.  
  39.  
  40. </body>
  #5 (permalink)  
Antiguo 25/11/2015, 15:51
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 5 años, 10 meses
Puntos: 263
Respuesta: Barra de progreso al enviar formulario

prueba quitandole el return false, es posible que este alli el problema ya que el envio es directo y no con ajax, del resto esta todo bien
__________________
[email protected]
HITCEL
  #6 (permalink)  
Antiguo 02/12/2015, 07:58
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 10 años, 1 mes
Puntos: 3
Respuesta: Barra de progreso al enviar formulario

Muchas gracias xfxstudios! efectivamente ahora ya me muestra el gif de carga..

el problema es que mientras se está enviando el formulario el gif no se mueve

a si que sigue dando la sensación de que la pagina esta colgada..
seguire buscando alguna otra solucion

gracias
  #7 (permalink)  
Antiguo 02/12/2015, 08:29
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 5 años, 10 meses
Puntos: 263
Respuesta: Barra de progreso al enviar formulario

pues ya eso es problema del gif, porque no tiene nada que ver con el codigo en cuestion,te lo digo porque los uso a en todos mis formularios sin problemas, se mueven hasta que recibo la respuesta de extio o error, de todas maneras te dejo esta pagina que me ha servido de mucho para crear mis loaders:

http://www.ajaxload.info/

espero te sirva
__________________
[email protected]
HITCEL

Última edición por xfxstudios; 02/12/2015 a las 09:29
  #8 (permalink)  
Antiguo 03/12/2015, 05:40
 
Fecha de Ingreso: marzo-2011
Mensajes: 105
Antigüedad: 10 años, 1 mes
Puntos: 3
Respuesta: Barra de progreso al enviar formulario

hola xfxstudios! ya se donde estaba el problema, era en el explorador.. lo estaba comprobando con Safari, el gif se mueve en todos los exploradores menos en Safari

Gracias por todo xfxstudios!

un saludo!

Etiquetas: barra, formulario, progreso, todo
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 02:37.