web-dev-qa-db-fra.com

Vérification de l'URL de l'image Javascript

J'ai besoin de 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 cela devrait nous donner une valeur réelle et avec une URL comme celle-ci http: //www.example .com/asdf.php devrait retourner false. Comment pouvons-nous faire cela en 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.

javascriptimagefunctionurlverify
30
John Preston

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);
}

Cela vérifie si l'URL se termine par l'une de ces quatre extensions.

Je ne connais aucun moyen de Javascript dans le client pour vérifier le type de contenu d'une URL qui n'est pas sur le même domaine que la page Web, car vous ne pouvez pas utiliser ajax en dehors du domaine de la page Web. Autant que je sache, vous devrez envoyer l'URL à un processus serveur et lui faire télécharger l'image, obtenir le type de contenu et vous le renvoyer.

Mais, vous pouvez vérifier si une balise d'image peut charger l'URL en utilisant une fonction comme celle-ci:

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 rappel à un moment ultérieur avec deux arguments: l'URL d'origine et un résultat ("succès", "erreur" ou "délai d'attente"). Vous pouvez voir ce travail sur plusieurs URL, 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 jsFiddle: http://jsfiddle.net/jfriend00/vhtzghkd/

80
jfriend00

utilisez la méthode de demande http HEAD http pour vérifier le type de contenu ...

$.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: faute de frappe mise à jour

6
redDevil