Вопрос по image, function, javascript, url, verify – Javascript Image Url Verify

29

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

Этот вопрос состоит из 3 частей, убедитесь, что это правильный URL-адрес? проверить это расширение изображения? проверить содержание изображения? louis.luo
Итак, вы хотите проверить, если URLв строке заканчивается правильным расширением? Тогда вы тоже хотите прочитать содержание изображения? gideon
@Louis_PIG Да, именно так. John Preston
@gideon да, я хочу строку с правильным расширением, но я не уверен, что это нормально или нет, и поэтому я хочу проверить тип содержимого URL John Preston

Ваш Ответ

2   ответа
76

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

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/

@JohnPreston - я добавил два способа проверить URL моего ответа. Во-первых, вы отправляете URL на сервер и проверяете тип содержимого. Во-вторых, вы можете запустить некоторый код, чтобы загрузить его в тег изображения и посмотреть, удастся ли это. jfriend00
хорошо, так как насчет того, если человек вводит URL-адрес php-файла, как этоexample.com/asdf.php.jpg тогда как мы можем вернуть ложное значение этому, потому что наша функция собирается вернуть истину. John Preston
/\.(jpe?g|gif|png)$/ skqr
Спасибо за вашу помощь. Эта функция работает, но как мы можем проверить тип содержимого URL. Я имею в виду первый шаг - проверить расширение URL, и я хочу сделать его более безопасным, добавив второй шаг, чтобы проверить тип содержимого URL. John Preston
Благодарю многих. Ты восхитителен. Вы экономите мое время. Оно работает. Еще раз спасибо за вашу поддержку и время. John Preston
6

используйте 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;
  }
}

редактировать: обновленная опечатка

Здесь есть опечатка: lasIndexOf -> lastIndexOf arthur.sw
Оба из них используют jQuery, а OP не пометил вопрос для jQuery. jfriend00
пожалуйста исправьте$.ajax{} в$.ajax({}) Kiko Garcia
Ajax-решение интересно, но не работает в межсайтовом запросе, если не включен CORS Jean RAKOTOZAFY

Похожие вопросы