Javascript Image Url Verify

Question

URL'nin bu uzantıların herhangi bir görüntüsünün olup olmadığını kontrol etmek için bir görüntü URL'sini doğrulamanız gerekir: - jpeg, jpg, gif, png. Örnek: - Bu URL'yi doğruladığımız zaman http://www.example.com/asdf.jpg bize gerçek değeri vermeli ve bu http://www.example.com/asdf.php gibi URL'ler yanlış döndürmelidir. Bunu javascript'te nasıl yapabiliriz ve ayrıca URL'nin içerik türünü kontrol etmek istiyorum. Böylece, url'nin bir görüntü olup olmadığını söyleyebiliriz.

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

dize extenstions Eğer inArray yöntemi kullanabileceğinizi içerip içermediğini kontrol etmek

Answer 1

Dosya uzantısını kontrol etmek için şöyle düzenli bir ifade kullanabilirsiniz:

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

Bu, URL'nin bu dört uzantıdan birinde bitip bitmediğini kontrol eder.

Web sayfasının etki alanı dışında ajax kullanamadığınız için, web sayfasındaki aynı etki alanında olmayan bir URL'nin içerik türünü doğrulamak için istemcideki javascript öğesinden hiçbir şekilde emin değilim. . Bildiğim kadarıyla, URL'yi bir sunucu işlemine göndermeniz ve görüntüyü indirmeniz, içerik türünü almanız ve size geri göndermeniz gerekir.

Fakat, bir resim etiketi böyle bir işlevi kullanarak URL'yi yüklediğini görmek için kontrol edebilirsiniz: Bu fonksiyon iki argüman ile bazı gelecekteki zaman geri arama arayacak

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

: Orijinal URL ve bir sonuç ("başarı", "hata" veya "zaman aşımı"). Birkaç URL'ler üzerinde bu işi görebilir, bazı iyi ve bazı burada, kötü:

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

: Bu şimdi Promises çağı olduğundan, http://jsfiddle.net/jfriend00/qKtra/

---

Ve burada bir söz döndüren bir versiyonu

Ve jsFiddle demosu: http://jsfiddle.net/jfriend00/vhtzghkd/

Answer 2

ContentType'ı kontrol etmek BAŞ http isteği yöntemi kullanmak ...

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

düzenleme: güncellenmiş yazım hatası