[SOLUCIONADO] Barra de progreso al enviar formulario

tonieet · #1 (**permalink**) 23/11/2015, 07:09

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<body>
<form name="mail_frm" action="enviook.php" method="post" enctype="multipart/form-data">
<p>De:
 Remitente:
 <input type"text" name="remitente" id="remitente" />
 <br/><br/>
  Asunto:
 <input type"text" name="asunto" id="asunto" />
 <br/><br/>
 Adjuntar archivo: 
  <input type="file" name="archivo_fls"/> <br/><br/>
  Adjuntar archivo dos: 
 <input type="file" name="archivodos"/> <br/><br/>
</p>
Mensaje: <br/> 
  <textarea name="mensaje_txa"></textarea>
  <br/><br/>
  Mensaje dos: <br/> 
  <textarea name="mensajedos_txa"></textarea>
  <br/><br/>
   TEXTO:
  <input type"text" name="texto" id="texto" />
  <br/><br/>
  <input type="submit" name="button" id="enviar_btn" value="Enviar" />
  <br/>
 </p>
<?php
error_reporting (E_ALL ^ E_NOTICE ^ E_WARNING);
if (isset ($_GET ["respuesta"])){
    echo "<span>".$_GET["respuesta"]."</span>";
    }
?>
</form>
</body>

-DOCUMENTO CON CODIGO PHP-

Código PHP:

Ver original<body>
 
 
<?php
 
$mensaje= htmlspecialchars($_POST["mensaje_txa"]);
$mensajedos= htmlspecialchars($_POST["mensajedos_txa"]);
$texto= $_POST["texto"];
$remi= $_POST["remitente"];
$asunto= $_POST["asunto"];
$archivo=  $_FILES["archivo_fls"]["tmp_name"];
$destino=  $_FILES["archivo_fls"]["name"];
$archivodos=  $_FILES["archivodos"]["tmp_name"];
$destinodos=  $_FILES["archivodos"]["name"];
 
 
$cabeceras = "MIME-Version: 1.0\r\n";
$cabeceras .="Content-type: text/html; charset=iso-8859-1\r\n";
$cabeceras .="From: $de \r\n";
 
if(move_uploaded_file($archivo,$destino)) {
if(move_uploaded_file($archivodos,$destinodos)) {   
    
    //incluyo la clase phpmailer
    include("class.phpmailer.php");
    include("class.smtp.php");
    
    $mail = new PHPMailer(); 
    $mail->IsSMTP(); 
    $mail->SMTPAuth = true; 
    $mail->SMTPSecure = "ssl"; 
    $mail->Host = "smtp.mundofimo.com"; 
    $mail->Port = 465; 
    $mail->From = "[email protected]"; 
    $mail->AddAddress ("[email protected]"); 
    $mail->Username = "[email protected]"; 
    $mail->Password = "**********"; 
        $mail->Subject =("$remi"); 
    $mail->WordWrap =50; 
    $mail->MsgHTML("Remitente: $remi<br>
                    Asunto: $asunto<br>
                    Mensaje: $mensaje<br>
                    Mensajedos: $mensajedos<br>
                    Texto: $texto"); 
    $mail->AddAttachment($destino); 
    $mail->AddAttachment($destinodos);
    
    if($mail->Send()){ 
        $respuesta =" El mensaje ha sido enviado correctamente";
        } 
        else{
        $respuesta = "el mensaje NO se pudo enviar";
        $respuesta .= " Error ".$mail->ErrorINfo;
            }
            }
}
        else{
            $respuesta ="ocurrio un error al subir el archivo adjunto ";
            } 
header ("Location: nuevousuario.php?respuesta=$respuesta");
 ?>
</body>

tonieet · #2 (**permalink**) 24/11/2015, 11:54

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..

xfxstudios · #3 (**permalink**) 24/11/2015, 14:18

Código Javascript:

Ver originalfunction loader(){
document.getElementById('loader').style.display = 'Block';
 
}

Código HTML:

Ver original<form onSubmit="loader(); return false">
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<div id="loader" style="display:none"><img src="carpeta/loader.gif"></div>

eso seria todo!!

tonieet · #4 (**permalink**) 25/11/2015, 09:34

Cita:

Iniciado por xfxstudios

Código Javascript:

Ver originalfunction loader(){
document.getElementById('loader').style.display = 'Block';
 
}

Código HTML:

Ver original<form onSubmit="loader(); return false">
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<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<script>
function loader(){
document.getElementById('loader').style.display = 'Block';
 }
</script>
<body>
<form  name="mail_frm" action="enviook.php" method="post" enctype="multipart/form-data" onSubmit="loader(); return false">
<p>De:
 Remitente:
  <input type"text" name="remitente" id="remitente" />
  <br/><br/>
 Asunto:
  <input type"text" name="asunto" id="asunto" />
  <br/><br/>
Adjuntar archivo: 
  <input type="file" name="archivo_fls"/> <br/><br/>
  Adjuntar archivo dos: 
   <input type="file" name="archivodos"/> <br/><br/>
</p>
Mensaje: <br/> 
  <textarea name="mensaje_txa"></textarea>
  <br/><br/>
  Mensaje dos: <br/> 
  <textarea name="mensajedos_txa"></textarea>
  <br/><br/>
   TEXTO:
  <input type"text" name="texto" id="texto" />
  <br/><br/>
  <input type="submit" name="button" id="enviar_btn" value="Enviar" />
  <br/>
 </p>
<?php
error_reporting (E_ALL ^ E_NOTICE ^ E_WARNING);
if (isset ($_GET ["respuesta"])){
    echo "<span>".$_GET["respuesta"]."</span>";
    }
?>
</form>
 
<div id="loader" style="display:none"><img src="enviando.gif"></div>
 
 
</body>

xfxstudios · #5 (**permalink**) 25/11/2015, 15:51

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

tonieet · #6 (**permalink**) 02/12/2015, 07:58

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

xfxstudios · #7 (**permalink**) 02/12/2015, 08:29

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

tonieet · #8 (**permalink**) 03/12/2015, 05:40

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!