Reload Captcha

ZiTAL · #1 (**permalink**) 05/05/2008, 01:49

Hola a todos, tengo un problemita y es que no consigo recargar el captcha:

captcha.php

Código PHP:

  <?php
    header('Cache-Control: no-store, no-cache, must-revalidate');
    header('content-type: image/png'); 
    session_start();    
    $text=random_text(5);
    $_SESSION['captcha']=$text;
        
     $imagen = ImageCreateFromPNG('resources/img/trans.png');
     $colorTexto = imagecolorallocate($imagen,0xE2,0x40,0x43); // color #E24043
     $fuente = "resources/otf/LithosPro-Black.otf";
     $tamanoFuente="15";
     imagettftext($imagen,$tamanoFuente,0,10,20,$colorTexto,$fuente,$text);
     imagepng($imagen);

     function random_text($length)
      {
          mt_srand((double)microtime()*1000000);
        $i=0;
        $texto='';
        for($i=0;$i<$length;$i++)
         {
             $tmp=mt_rand(0,255);
             while(!ereg("^[A-Z0-9]$", chr($tmp)))
              {
                 $tmp=mt_rand(0,255);
              }
             $texto.=chr($tmp);
         }
        return $texto;
      }
?>

y luego en la parte de html/javascript:

Código HTML:

 <p><img src="/onegin/captcha.php" id="captcha" alt="captcha" style="vertical-align: middle;"/>
                <input type="text" name="captcha" class="campoS" /><input type="button" name="reload" id="reload" value="Recargar" class="btn" onclick="transitionCaptcha()" /></p>

Código:

function transitionCaptcha()
 {
 	id=document.getElementById('captcha');
 	id.src='/onegin/resources/img/loading2.gif'; 
 	setTimeout("reloadCaptcha()",1000);
 } 
function reloadCaptcha()
 {
 	id=document.getElementById('captcha');
 	id.src='/onegin/captcha.php';
 }

pero no me recarga, se supone que esto:

Código PHP:

  header('Cache-Control: no-store, no-cache, must-revalidate');

debe forzar la recarga no?

ZiTAL · #2 (**permalink**) 05/05/2008, 01:52

me respondo a mi mismo:

Código:

function reloadCaptcha()
 {
 	id=document.getElementById('captcha');
 	id.src="/onegin/captcha.php?"+Math.random()+"="+Math.random();
 }

poniendolo asi funciona ;)

miSko · #3 (**permalink**) 05/05/2008, 01:55

no he mirado tu codigo, solo por encima y lo de

header('Cache-Control: no-store, no-cache, must-revalidate');

No siempre funciona, la unica forma que he visto yo siempre de que recargue siempre la imagen, es haciendo creer al explorador, que es una imagen totalmente distinta.

Y como logramos esto? pues añadiendo un codigo de control a la hora de llamar a la imagen

por ejemplo

El explorador tomara como distintas estas imagenes :

captcha.gif?78919287
captcha.gif?12898129

Una solucion muy simple seria :

Código PHP:

   
$num1 = mt_rand(1,10000) ; 
$num2 = mt_rand(1,10000) ; 
 
$urlImagen = "captcha.gif?".$num1.$num2 ; 
 
echo '<img src="'.$urlImagen."></img>" ;

A ver si esto te ayuda :P

ZiTAL · #4 (**permalink**) 05/05/2008, 02:05

gracias por tu respuesta pero el problema no es exactamente ese, al recargar la página lo hace bién, lo único que quiero es recargar el captcha, la solución viene a ser la misma pero de distinta forma.

;)

miSko · #5 (**permalink**) 05/05/2008, 08:42

Si solo queres recargar el captcha sin necesidad de recargar la pagina, lo tuyo es javascript

Código PHP:

  <script> 
 
function cambiaCaptcha() { 
 
var numMaximo = 10000 ; 
var numero = Math.floor(Math.random()*numMaximo +1) 
 
var img = 'captcha.gif?' + numero ; 
 
document.getElementById('captcha').src = img ; 
 
} 
 
</script> 
 
<img id="captcha" src="captcha.gif?1919192921"></img> 
 
<input type=button onclick="cambiaCaptcha()">

Esto te hace una Imagen y un Boton, y cada vez q hagas click al boton, se cambia el captcha, sin recargar la pagina ^_^

ZiTAL · #6 (**permalink**) 05/05/2008, 09:13

si en el segundo post ya me respondo a mi mismo con una solucion javascript ;)

miSko · #7 (**permalink**) 05/05/2008, 09:17

Juas, joder como se me va no? :P xD

Escoffie · #8 (**permalink**) 24/05/2008, 12:53

Hola a todos. Perdón por colarme.
He probado esta forma de recargar el captcha, y para variar en Firefox funciona sin problema, pero en Explorer (6 ó 7) me dice "Error en la página" y "Se esperaba un objeto".
El código que estoy usando es idéntico.
Mi archivo se llama captcha.php (no gif, pero supongo que no tiene nada que ver);

ZiTAL · #9 (**permalink**) 25/05/2008, 04:28

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulario</title>
<script type="text/javascript">
function captchaLoad()
 {
 	var c=document.getElementById('captcha'); 	
 	c.src="/onegin/captcha.php?"+Math.random()+"="+Math.random();
 }
</script>
</head>
<body>
<img src="loading.gif" id="captcha" alt="captcha" style="vertical-align: middle;"/>
<input type="button" value="reload" onclick="captchaLoad()" />
<script type="text/javascript">
captchaLoad();
</script>
</body>
</html>

Problemas que podemos tener:
- Si ponemos que la funcion se ejecute en el head, cascara ya que todavia no se ha cargado el HTML, por eso ponemos al final del codigo HTML.

Otra solucion seria poner la funcion en el

...
<body onload="captchaLoad()">
...

Suerte

Escoffie · #10 (**permalink**) 25/05/2008, 11:19

Hola ZiTAL.

Al final fue una tontería: el atributo type de mi etiqueta <script> estaba mal escrito

Gracias de todos modos. Para evitar los problemas que comentas lo he puesto al final del DOM y funciona perfectamente.

Saludos.

ZiTAL · #11 (**permalink**) 25/05/2008, 14:31

nada hombre para algo estamos ;)