11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu ] Détecter une image non valide en jQuery ?

Bonjour,

Je voudrais savoir s'il est possible de détecter si une image récupérée par un flux ("http://url_image") est valide ou non avec jQuery ?

Dans mon code var img me donne l'url de l'image en question :
var img = jQuery(this).children("span").attr("id");


Comment savoir si cette url retourne bien une image ?
Modifié par kibodio (20 Apr 2010 - 16:08)
Je ne sais pas ce que tu veux faire, mais d'une manière générale il faut vérifier côté serveur et ne pas faire confiance au client (ni aux clients).
Côté client, les vérifs c'est plutôt pour améliorer l'expérience utilisateur.
Je récupère l'url de l'image. Donc je veux savoir si cette url correspond bien à une image ou non (erreur dans l'url etc...). J'ai mis en place une expression régulière. Voilà où j'en suis.
kibodio a écrit :
Je récupère l'url de l'image. Donc je veux savoir si cette url correspond bien à une image ou non (erreur dans l'url etc...). J'ai mis en place une expression régulière. Voilà où j'en suis.

Comme l'a bien dit Paolo, il vaut mieux tester côté serveur si le fichier en question est bien une image ou non. À savoir qu'une image peut avoir par exemple l'extension .php tant que le header type MIME de ce fichier est déclaré comme étant une image.

Donc pour être vraiment sûr, il faut appeler via $.ajax() (ou .load() ) une page en PHP qui elle va vraiment évaluer le type du fichier.


Sinon, si vraiment tu es sûr et certain que les images auront des extensions valides (et qu'elles sont effectivement des images et pas autre chose) alors tu peux très bien isoler l'extension comme ceci par exemple :

function ext_fichier(filename){
	return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
}

(source : http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript/190878#190878 )



ah oui, et vu que tu récupères l'url entière (via window.location j'imagine), il va falloir passer par une autre regex pour n'extraire que la dernière partie après le dernier slash... ou l'implémenter dans la regex ci-dessus. Smiley edit Modifié par ZeB_panam (20 Apr 2010 - 14:55)
Salut,

Tu peux aussi charger l'image avec Image() quand elles sont en ligne.
var urls = ["http://www.kisai.info/avatar/avatar.php", "plop", "http://image.jeuxvideo.com/images/p3/c/r/crysis-2-playstation-3-ps3-00z.jpg", "http://pas-d-image.com/unechose.jpg"];
for (var i in urls)
{
	var img = new Image(); //document.createElement("img");
	img.onload = function(){
		console.log("image chargée " + this.src);
	};
	img.onerror = function(){
		console.log("erreur " + this.src);
	};
	img.onabort = function(){
		console.log("abandon " + this.src);
	};
	//img.onerror = img.onabort = function(){traitement d'erreur};
	img.src = urls[i];
	console.log("ajoute l'image " + img.src);
	//DOMContener.appendChild(img);
}

Faut quand même vérifier côté serveur.[/i]
Sujet clos
Aller à