Javascript Image Url Verify - PullRequest
Новая
       9

Javascript Image Url Verify

30 голосов
/ 15 марта 2012

Мне нужно проверить URL-адрес изображения, чтобы проверить, является ли URL-адрес изображением любого из этих расширений: - jpeg, jpg, gif, png.Пример: - когда мы проверяем этот URL http://www.example.com/asdf.jpg, он должен дать нам истинное значение, а с таким URL http://www.example.com/asdf.php должен возвращать false.Как мы можем сделать это в JavaScript, а также я хочу проверить тип содержимого URL.Так что мы можем сказать, является ли URL изображением или нет.

Ответы [ 2 ]

81 голосов
/ 15 марта 2012

Вы можете использовать регулярное выражение, подобное этому, чтобы проверить расширение файла: 

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

Это проверяет, заканчивается ли URL-адрес одним из этих четырех расширений.

Я не знаю способа из javascript в клиенте проверить тип содержимого URL-адреса, который не находится в том же домене, что и веб-страница, потому что вы не можете использовать ajax вне домена веб-страницы. Насколько я знаю, вам придется отправить 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 и результатом («success», «error» или «timeout»). Вы можете увидеть эту работу на нескольких 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/

6 голосов
/ 15 марта 2012

используйте метод HTTP-запроса HEAD, чтобы проверить тип содержимого ... 

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

edit: обновленная опечатка

...