269 votos

¿Cómo puedo comprobar si el archivo existe en jQuery o JavaScript?

¿Cómo puedo comprobar si un archivo de mi servidor existe en jQuery o JavaScript?

444voto

cichy Puntos 4956

Con jQuery:

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

EDITAR:

Aquí está el código para comprobar el estado del 404, sin usar jQuery

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

Pequeños cambios y podría comprobar el estado del código de estado HTTP 200 (éxito), en su lugar.

0 votos

Eso no te dirá necesariamente si el archivo existe o no. Hay más de una forma de que una petición AJAX dé error.

0 votos

Lo sé, la conexión puede estar caída, etc. Esto también lo puedes comprobar comprobando el archivo que sabes con seguridad que existe. Pero la pregunta era sobre otra cosa ;)

0 votos

Sí, una pequeña mejora sería comprobar los diferentes códigos de estado dentro de su método de devolución de llamada de error, siendo el 404 el específico al que se refiere, aunque probablemente le importaría igual si obtuviera un 500 (error interno del servidor) o un 403 (acceso denegado).

76voto

Un enfoque similar y más actualizado.

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })

2 votos

¿por qué está más actualizado? $.ajax parece mejor si es más compatible con el pasado, ¿no?

16 votos

$.ajax también funciona, pero las funciones success/error/complete están obsoletas en favor de los métodos promises, done/fail/always. lea más sobre esto aquí api.jquery.com/jQuery.ajax . Usé get aquí porque sólo estamos interesados en un simple get, pero esto es sólo una abreviatura de $.ajax({url:url,type:'GET'}).

5 votos

Si la imagen no existe, la consola se hace eco de un error 404. ¿Hay alguna forma de eliminar esto, porque mi aplicación siempre espera que una imagen no exista...

71voto

Tester Puntos 289

Esto funciona para mí:

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

2 votos

Aunque algunas otras respuestas son mejores por su función, yo +1 esta respuesta ya que es lo que estaba buscando. Sólo recuerde, siempre obtendrá cero a menos que cargue el contenido primero!. es decir: window.addEventListener('load', function(){

0 votos

De hecho, seguía teniendo problemas, incluso con la carga de la ventana. Parece que la imagen no se puede medir hasta que se almacena en caché de alguna manera. De todos modos, no me funciona en la primera carga de la página. (es decir, el usuario nunca ha visto esta imagen antes). Puede que te funcione si tienes la imagen en una página anterior, tal vez...

3 votos

Eso es porque establece el origen de la imagen e INMEDIATAMENTE comprueba la altura de la imagen que aún no ha terminado de descargarse. Tendrías que añadir un manejador onload para que esto funcione. No es un método fiable por esa misma razón.

46voto

Gino Puntos 664

usé este script para añadir una imagen alternativa

function imgError()
{
alert('The image could not be loaded.');
}

HTML:

<img src="image.gif" onerror="imgError()" />

http://wap.w3schools.com/jsref/event_onerror.asp

25 votos

Genial no lo sabía. Puedes hacer lo siguiente para establecer una alternativa de guardado si no existe una imagen: <img src="imagen.gif" onerror="este.src='alternativa.gif'">

3 votos

@Ridcully Ah, pero ¿y si la alternativa falla? Entonces estás en un bucle sin fin ¿no?

0 votos

Si la alternativa falla, supongo que hay algo más equivocado en el lado del servidor (o en el lado del programador :P)

26voto

Moob Puntos 71

Mientras estés probando los archivos de la el mismo dominio esto debería funcionar:

function fileExists(url) {
    if(url){
        var req = new XMLHttpRequest();
        req.open('GET', url, false);
        req.send();
        return req.status==200;
    } else {
        return false;
    }
}

Por favor, tened en cuenta que este ejemplo está usando una petición GET, que además de obtener los encabezados (todo lo que necesitas para comprobar si el archivo existe) obtiene el archivo completo. Si el archivo es lo suficientemente grande, este método puede tomar un tiempo para completarse.

La mejor manera de hacerlo sería cambiando esta línea: req.open('GET', url, false); a req.open('HEAD', url, false);

6 votos

Lo siento, esto es efectivamente lo mismo que la respuesta aceptada. No me hagas caso.

1 votos

Sus algunos detalles más en la forma no jQuery que puede ser útil

0 votos

@Moob, no es "efectivamente lo mismo que la respuesta aceptada", estás enviando una solicitud GET, que es muy diferente a la solicitud HEAD.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X