web-dev-qa-db-ja.com

JavaScriptイメージのURL検証

画像のURLを確認して、URLがこれらの拡張子の画像であるかどうかを確認する必要があります：-jpeg、jpg、gif、png。例：-このURLを確認するとき http://www.example.com/asdf.jpg これは本当の値を与え、このようなURLで http：//www.example .com/asdf.php はfalseを返す必要があります。 javascriptでこれをどのように行うことができますか？また、urlのコンテンツタイプを確認したいと思います。そのため、URLが画像であるかどうかを判断できます。

javascriptimagefunctionurlverify
30
John Preston

このような正規表現を使用して、ファイル拡張子を確認できます。

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

これにより、URLがこれらの4つの拡張子のいずれかで終わっているかどうかが確認されます。

Webページのドメイン外ではajaxを使用できないため、クライアントのjavascriptからWebページと同じドメインにないURLのコンテンツタイプを確認する方法はありません。私が知っている限りでは、サーバープロセスにURLを送信し、イメージをダウンロードし、コンテンツタイプを取得して、それを返さなければなりません。

ただし、次のような関数を使用して、イメージタグがURLをロードできるかどうかを確認できます。

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

この関数は、元のURLと結果（「成功」、「エラー」または「タイムアウト」）の2つの引数を使用して、将来コールバックを呼び出します。この動作は、いくつかのURLで見ることができます。いくつかは良いものと悪いものがあります。ここで： http://jsfiddle.net/jfriend00/qKtra/

そして、これは今や約束の時代なので、ここに約束を返すバージョンがあります：

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

そして、jsFiddleデモ： http://jsfiddle.net/jfriend00/vhtzghkd/

80
jfriend00

HEAD http要求メソッドを使用してcontenttypeを確認してください...

$.ajax({
  type: "HEAD",
  url : "urlValue",
  success: function(message,text,response){
     if(response.getResponseHeader('Content-Type').indexOf("image")!=-1){
           alert("image");
    }
  } 
});

文字列にその拡張が含まれているかどうかを確認するには、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;
  }
}

編集：タイプミスを更新

6
redDevil