Discussion :

[jeroen]

Bonjour, je suis confronté à un petit soucis

Je cherche à faire passer une image (.gif) par AJAX.

En gros je veux que le XhrObj.responseText renvoie une image lue via PHP.

Mon code est le suivant

Fichier JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
XhrObj.open("GET", "script.php");
 
XhrObj.onreadystatechange = function() {
	if (XhrObj.readyState == 4 && XhrObj.status == 200) {
		content.innerHTML = XhrObj.responseText ;
		}
	}    
 
XhrObj.setRequestHeader("Content-Type", "image/gif"); 
XhrObj.send(null);

script.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<?php	
$url="http://www.sitedistant/image.gif";
header('Content-type: image/gif');
readfile($url); 
exit;
?>

Malheureusement en retour j'ai le code brut de l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

GIF89a .....

alors qu'en appelant directement script.php ça marche.

J'ai pourtant essayé de déclarer le bon header dans lors de l'appel, je me mélange les pinceaux qq part ?

Une idée ?

Merci

[Bovino]

Pourquoi as-tu besoin d'AJAX pour afficher une image ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

content.innerHTML = '<img src="http://www.sitedistant/image.gif" alt="Imge" />

est largement suffisant.

Au pire, si la requête est destinée à te renvoyer l'URL de l'image, fais juste un echo de cette URL et au retour de ta requête, utilise cette donnée pour écrire ta balise.

En tout état de cause, la seule façon d'afficher une image, c'est d'utiliser la balise idoine...

[lysandro]

Même question que Bovino par curiosité. Et s'il ne s'agit que d'afficher l'image sa réponse est la meilleure. Toutefois, une alternative est de :

préfixer le flux encodé en base64 de 'data:image/gif;base64,' et le mettre dans l'attribut src d'une balise IMG.

Soit: dans le php, générer le préfixe puis ajouter le retour de readfile() encodé en base64

XhrObj.responseText devrait donc contenir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data:image/gif;base64,<flux encodé base64>

et pour l'afficher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img.src = XhrObj.responseText

[jeroen]

Merci pour vos réponses. L'image en question, chose curieuse, n'est pas affichée par le navigateur quand on demande de charger son URL : il propose de la télécharger....

Ca passe par contre avec vos deux méthodes, donc c'est plus nécessaire de passer l'image dans le flux, j'ai fait un mix en passant par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img.src = XhrObj.responseText

, où XhrObj.responseText contient simplement l'URL récupérée par AJAX.

Merci !