Мне нужно проверить URL-адрес изображения, чтобы проверить, является ли url образ любого из этих расширений: - jpeg, jpg, gif, png. Пример: - когда мы проверяем этот url http://www.example.com/asdf.jpg, он должен дать нам истинное значение и с этим URL-адресом http://www.example.com/asdf.php должен возвращать false. Как мы можем это сделать в javascript, а также я хочу проверить тип содержимого URL-адреса. Так что мы можем сказать, является ли URL-адрес изображением или нет.
Javascript Image Url Verify
Ответ 1
Вы можете использовать регулярное выражение, подобное этому, для проверки расширения файла:
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-адрес и результат ( "успех", "ошибка" или "тайм-аут" ). Вы можете увидеть эту работу по нескольким URL-адресам, некоторые хорошие и некоторые плохие, здесь: http://jsfiddle.net/jfriend00/qKtra/
И, так как это сейчас эпоха Promises, вот версия, которая возвращает обещание:
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/
Ответ 2
используйте метод запроса HEAD http для проверки содержимого...
$.ajax{
type: "HEAD",
url : "urlValue",
success: function(message,text,response){
if(response.getResponseHeader('Content-Type').indexOf("image")!=-1){
alert("image");
}
}
}
чтобы проверить, содержит ли строка эти extenstions, вы можете использовать метод 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;
}
}
изменить: обновленная опечатка