11548 sujets

JavaScript, DOM et API Web HTML5

Recharger une image faite en php avec du javascript

Bonjour,

Je viens de créer un code de vérification en générant une image à partir d'un script php
Jusque la tout va bien...

Je me suis dit, tiens si le visiteur n'arrive pas à lire le texte dans l'image il faut qu'il la recharge... Alors j'ai créé un petit script en javascript qui recharge l'image (anti_spam.php)
Mais j'ai l'impression que le navigateur garde l'image dans le cache et il me charge toujours la même image.

Le Javascript :
<script type="text/javascript">
var changeIMG = 0;
function changeCP(){
	document.getElementById('imgCP').src = 'anti_spam.php';
	changeIMG += 1;
	document.getElementById('val').value = changeIMG;
}
</script>


Le HTML :

<div>
<img id="imgCP" src="anti_spam.php" style="border:#333333 solid thin;" align="absmiddle" alt="ERREUR" />&nbsp;<img src="img/recharge.png" title="Changer l'image" align="absmiddle" onclick="changeCP();" /><br />
<input id="val" name="valeur" />
</div>


Pour ceux que ca intéresse le PHP (mais le problème ne vient pas de la) :

session_start();
header("Content-type: image/png");
$image = imagecreate(150, 45);
unset($_SESSION['controle']);

$blanc = imagecolorallocate($image, 255, 255, 255);
$noir = imagecolorallocate($image, 0, 0, 0);
$gris = imagecolorallocate($image, 100, 100, 100);

$string = 'ABCEFGHIJKLMNPQRSTUVWXYZ123456789';
$texte = '';
$_SESSION['controle'] = '';
for( $i=0; $i<5; $i++ ){
	$lettre = $string[mt_rand(0, 32)];
	$chaine[$i]= $lettre;
	$texte .= $lettre;
}
$_SESSION['controle'] = $texte;

// Définition de la variable d'environnement pour GD
putenv('GDFONTPATH=' . realpath('.'));

// Nom de la police à utiliser
$font = 'comic';
$nb = 0;
for($i=0; $i<5; $i++){
	imagettftext($image, 17, mt_rand(-15,15), 24+$i*25, mt_rand(20, 30), $noir, $font, $chaine[$i]);
	$nb++;
}

for($i=0; $i<5; $i++){
	imageline($image, mt_rand(10,20+$i*25), mt_rand(0,10), mt_rand(10,20+$i*25), mt_rand(25,35), $gris);
}

imagepng($image);


Quelqu'un saurait comment on force un navigateur à recharger une image (ou autre) sans qu'il aille voir dans le cache avant?
Petite précision :

L'Input est la uniquement pour vérifier que la fonction JS est bien appelée quand on clique sur l'image recharge.png
Ça incrémente juste une variable.
Voila la solution :


var changeIMG = 0;
function changeCP(){
	var myDate = new Date();
	document.getElementById('imgCP').src = 'anti_spam.php?a=' + myDate.getTime();
	changeIMG += 1;
	document.getElementById('val').value = changeIMG;
}


Petite explication :
En ajoutant un élément unique dans l'url de l'image (getTime();) le navigateur recharge l'image à partir du script PHP

En espérant que ça serve à d'autres personnes
Sujet clos
Aller à