Vérifier L'Url De L'Image Javascript
je dois vérifier une url d'image pour vérifier si l'url est une image de l'une de ces extensions:- jpeg, jpg, gif, png. Exemple: - lorsque nous vérifions cette url http://www.example.com/asdf.jpg il devrait nous donner la valeur vraie et avec l'url comme ceci http://www.example.com/asdf.php devrait retourner false. Comment Pouvons-nous faire cela dans javascript et aussi je veux vérifier le type de contenu de l'url. Pour que nous puissions dire si l'url est une image ou non.
2 réponses
vous pouvez utiliser une expression régulière comme celle-ci pour vérifier l'extension du fichier:
function checkURL(url) {
return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}
ceci vérifie si l'url se termine dans l'une de ces quatre extensions.
Je ne connais aucun moyen de javascript dans le client pour vérifier le contenu-type d'une URL qui n'est pas sur le même domaine que la page web parce que vous ne pouvez pas utiliser ajax en dehors du domaine de la page web. Comme je le sais, Vous devez envoyer L'URL à un processus de serveur et l'avoir téléchargez l'image, obtenez le type de contenu et retournez-le à vous.
Mais, vous pouvez vérifier pour voir si une balise d'image peut charger l'URL en utilisant une fonction comme ceci:
function testImage(url, callback, timeout) {
timeout = timeout || 5000;
var timedOut = false, timer;
var img = new Image();
img.onerror = img.onabort = function() {
if (!timedOut) {
clearTimeout(timer);
callback(url, "error");
}
};
img.onload = function() {
if (!timedOut) {
clearTimeout(timer);
callback(url, "success");
}
};
img.src = url;
timer = setTimeout(function() {
timedOut = true;
// reset .src to invalid URL so it stops previous
// loading, but doesn't trigger new load
img.src = "//!!!!/test.jpg";
callback(url, "timeout");
}, timeout);
}
cette fonction appellera votre callback à une date ultérieure avec deux arguments: L'URL originale et un résultat ("success"," error "ou"timeout"). Vous pouvez voir ce travail sur plusieurs URLs, certaines bonnes et d'autres mauvaises, ici: http://jsfiddle.net/jfriend00/qKtra/
et, puisque c'est maintenant l'ère des promesses, voici une version qui renvoie une promesse:
function testImage(url, timeoutT) {
return new Promise(function (resolve, reject) {
var timeout = timeoutT || 5000;
var timer, img = new Image();
img.onerror = img.onabort = function () {
clearTimeout(timer);
reject("error");
};
img.onload = function () {
clearTimeout(timer);
resolve("success");
};
timer = setTimeout(function () {
// reset .src to invalid URL so it stops previous
// loading, but doesn't trigger new load
img.src = "//!!!!/test.jpg";
reject("timeout");
}, timeout);
img.src = url;
});
}
et, une démo de jsFiddle: http://jsfiddle.net/jfriend00/vhtzghkd /
utilisez la méthode de requête http HEAD pour vérifier le contenttype...
$.ajax({
type: "HEAD",
url : "urlValue",
success: function(message,text,response){
if(response.getResponseHeader('Content-Type').indexOf("image")!=-1){
alert("image");
}
}
});
pour vérifier si la chaîne contient ces extensions, vous pouvez utiliser la méthode inArray,
function checkUrl(url){
var arr = [ "jpeg", "jpg", "gif", "png" ];
var ext = url.substring(url.lastIndexOf(".")+1);
if($.inArray(ext,arr)){
alert("valid url");
return true;
}
}
modifier: mise à jour typo