Javascript Image URL verify

Question

画像URLを確認して、URLがこれらの拡張子の画像であるかどうかを確認する必要があります： - jpeg、jpg、gif、png。例： - このURLを確認すると、http://www.example.com/asdf.jpgは本当の価値をもたらし、http://www.example.com/asdf.phpのようなURLでfalseを返すべきです。どのように私たちはjavascriptでこれを行うことができますまた、私はURLのコンテンツの種類を確認したい。そのURLがイメージなのかどうかはわかります

Answer 1

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

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

これらの4つの内線のいずれかでURLが終了するかどうかを確認します。

ウェブページのドメイン外でajaxを使用できないため、クライアントのjavascriptから、ウェブページと同じドメインにないコンテンツタイプを確認する方法はわかりません。私が知る限り、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); 
} 

この関数は2つの引数をいくつかの将来の時点で、あなたのコールバックを呼び出します：元のURLを結果（「成功」、「エラー」または「タイムアウト」）が含まれます。あなたは、いくつかのURLでこの作品を見ることができ、いくつかの良い、いくつかここでは、悪い：

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

：これは今、約束の時代であるから、 http://jsfiddle.net/jfriend00/qKtra/

---

そして、ここでの約束を返すバージョンです

jsFiddleデモ：http://jsfiddle.net/jfriend00/vhtzghkd/

Answer 2

文字列はあなたがInArrayバリメソッドを使用することができますextenstions、

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

が編集することを含んでいるかどうかを確認するために... ContentTypeををチェックする

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

をHEAD HTTPリクエストメソッドを使用します。更新タイプミス