validate - Javascript Image Url Verify

startswith javascript

Question

Necesito verificar una url de imagen para verificar si la url es una imagen de cualquiera de estas extensiones: - jpeg, jpg, gif, png. Ejemplo: cuando verifiquemos esta url http://www.example.com/asdf.jpg debería darnos un valor real y con una URL como esta http://www.example.com/asdf.php debería devolver false. ¿Cómo podemos hacer esto en JavaScript y también quiero verificar el tipo de contenido de la url? Para que podamos decir si la url es una imagen o no.

Answer 1

Puede usar una expresión regular como esta para verificar la extensión del archivo:

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

Esto verifica si la url finaliza en cualquiera de esas cuatro extensiones.

No conozco la forma de javascript en el cliente para verificar el tipo de contenido de una URL que no está en el mismo dominio que la página web porque no puede usar ajax fuera del dominio de la página web. Lo mejor que sé es que tendrías que enviar la URL a un proceso de servidor y hacer que descargue la imagen, obtener el tipo de contenido y devolvértelo.

Sin embargo, puede verificar si una etiqueta de imagen puede cargar la URL mediante una función como esta:

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

Esta función llamará a su devolución de llamada en algún momento futuro con dos argumentos: la URL original y un resultado ("éxito", "error" o "tiempo de espera"). Puede ver este trabajo en varias URL, algunas buenas y otras malas, aquí: http://jsfiddle.net/jfriend00/qKtra/

Y, como esta es ahora la era de Promesas, aquí hay una versión que devuelve una promesa:

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

Y una demostración de jsFiddle: http://jsfiddle.net/jfriend00/vhtzghkd/

Answer 2

utilice el método de solicitud HTTP HEAD para verificar el tipo de contenido ...

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

para verificar si la cadena contiene esas extensiones, puede usar el método 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;
}
}

editar: error tipográfico actualizado