¿Cómo verifico si el archivo existe en jQuery o JavaScript puro?

¿Cómo verifico si un archivo en mi servidor existe en jQuery o JavaScript puro?

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 verificar el estado 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 verificar el estado del código de estado HTTP 200 (éxito), en su lugar.

EDITAR 2: dado que la sincronización XMLHttpRequest está en desuso, puede agregar un método de utilidad como este para hacerlo asíncrono:

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}

Un enfoque similar y más actualizado.

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

Esto funciona para mi:

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

Utilicé este script para agregar 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

Siempre que esté probando archivos en 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;
    }
}

Tenga en cuenta que este ejemplo está utilizando una solicitud GET, que además de obtener los encabezados (todo lo que necesita para verificar si el archivo existe) obtiene el archivo completo. Si el archivo es lo suficientemente grande, este método puede tardar un tiempo en completarse.

La mejor manera de hacer esto sería cambiar esta línea: req.open('GET', url, false);areq.open('HEAD', url, false);

Recibía un problema de permisos de dominio cruzado cuando intentaba ejecutar la respuesta a esta pregunta, así que decidí:

function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
    return true;
}).bind('error', function() {
    return false;
});
}

Parece funcionar muy bien, ¡espero que esto ayude a alguien!

A continuación, le indicamos cómo hacerlo de la manera ES7, si está utilizando el transpilador Babel o Typecript 2:

async function isUrlFound(url) {
  try {
    const response = await fetch(url, {
      method: 'HEAD',
      cache: 'no-cache'
    });

    return response.status === 200;

  } catch(error) {
    // console.log(error);
    return false;
  }
}

Luego, dentro de su otro asyncalcance, puede verificar fácilmente si existe url:

const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');

console.log(isValidUrl); // true || false

Utilizo este script para verificar si existe un archivo (también maneja el problema de origen cruzado):

$.ajax(url, {
       method: 'GET',
       dataType: 'jsonp'
         })
   .done(function(response) { 
        // exists code 
    }).fail(function(response) { 
        // doesnt exist
    })

Tenga en cuenta que el siguiente error de sintaxis se produce cuando el archivo que se está comprobando no contiene JSON.

SyntaxError no capturado: token inesperado <

Una mejor opción es una llamada asíncrona para ver si existe un archivo, ya que no degrada la experiencia del usuario al esperar una respuesta del servidor. Si realiza una llamada .opencon el tercer parámetro establecido en falso (como en muchos ejemplos anteriores, por ejemplohttp.open('HEAD', url, false); ), esta es una llamada síncrona y recibe una advertencia en la consola del navegador.

Un mejor enfoque es:

function fetchStatus( address ) {
  var client = new XMLHttpRequest();
  client.onload = function() {
    // in case of network errors this might not give reliable results
    returnStatus( this.status );
  }
  client.open( "HEAD", address, true );
  client.send();
}

function returnStatus( status ) {
  if ( status === 200 ) {
    console.log( 'file exists!' );
  }
  else {
    console.log( 'file does not exist! status: ' + status );
  }
}

fuente: https://xhr.spec.whatwg.org/

Para una computadora cliente, esto se puede lograr mediante:

try
{
  var myObject, f;
  myObject = new ActiveXObject("Scripting.FileSystemObject");
  f =   myObject.GetFile("C:\\img.txt");
  f.Move("E:\\jarvis\\Images\\");
}
catch(err)
{
  alert("file does not exist")
}

Este es mi programa para transferir un archivo a una ubicación específica y muestra alerta si no existe

Función de JavaScript para verificar si existe un archivo:

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    if (xhr.status == "404") {
        console.log("File doesn't exist");
        return false;
    } else {
        console.log("File exists");
        return true;
    }
}

Primero crea la función

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

Después de usar la función de la siguiente manera

if($.UrlExists("urlimg")){
	foto = "img1.jpg";
}else{
	foto = "img2.jpg";
}

$('<img>').attr('src',foto);

Esta es una adaptación a la respuesta aceptada, pero no pude obtener lo que necesitaba de la respuesta, y tuve que probar que funcionó, ya que era una corazonada, así que estoy poniendo mi solución aquí.

Necesitábamos verificar que existiera un archivo local y solo permitir que el archivo (un PDF) se abriera si existía. Si omite la URL del sitio web, el navegador determinará automáticamente el nombre del host, haciendo que funcione en localhost y en el servidor:

$.ajax({

    url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
    type: 'HEAD',
    error: function () {
        //file not exists
        alert('PDF does not exist');

    },
    success: function () {
        //file exists
        window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");

    }
});

Lo que tendría que hacer es enviar una solicitud al servidor para que haga la verificación y luego devolverle el resultado.

¿Con qué tipo de servidor intenta comunicarse? Es posible que deba escribir un pequeño servicio para responder a la solicitud.

Esto no aborda la pregunta del OP, pero para cualquiera que devuelva resultados de una base de datos: aquí hay un método simple que utilicé.

Si el usuario no cargara un avatar, el avatarcampo sería NULL, así que insertaría una imagen de avatar predeterminada del imgdirectorio.

function getAvatar(avatar) {
    if(avatar == null) {
        return '/img/avatar.jpg';
    } else {
        return '/avi/' + avatar;
    }
}

luego

<img src="' + getAvatar(data.user.avatar) + '" alt="">

Funciona para mí, use iframe para ignorar que los navegadores muestren el mensaje de error GET

 var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
 if ($(imgFrame).find('img').attr('width') > 0) {
     // do something
 } else {
     // do something
 }

Quería una función que devolviera un valor booleano, encontré problemas relacionados con el cierre y la asincronía. Resolví de esta manera:

checkFileExistence= function (file){
    result=false;
    jQuery.ajaxSetup({async:false});
    $.get(file)
        .done(function() {
           result=true;
        })
        .fail(function() {
           result=false;
        })
    jQuery.ajaxSetup({async:true});
    return(result);
},