Como verifico se o arquivo existe no jQuery ou no JavaScript puro?

Como verifico se existe um arquivo no meu servidor em jQuery ou JavaScript puro?

Com o jQuery:

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

EDITAR:

Aqui está o código para verificar o status 404, sem usar o jQuery

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

Pequenas alterações e, em vez disso, poderia verificar o status do código de status HTTP 200 (êxito).

EDIÇÃO 2: Como a sincronização XMLHttpRequest foi preterida, você pode adicionar um método utilitário como este para fazê-lo de forma assíncrona:

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

Uma abordagem semelhante e mais atualizada.

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

Isso funciona para mim:

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

eu usei esse script para adicionar uma imagem 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

Enquanto você estiver testando arquivos no mesmo domínio, isso funcionará:

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

Observe que este exemplo está usando uma solicitação GET, que além de obter os cabeçalhos (tudo o que você precisa para verificar se o arquivo existe) obtém o arquivo inteiro. Se o arquivo for grande o suficiente, esse método poderá demorar um pouco para ser concluído.

A melhor maneira de fazer isso seria mudar esta linha: req.open('GET', url, false);parareq.open('HEAD', url, false);

Eu estava tendo um problema de permissões entre domínios ao tentar executar a resposta a esta pergunta, então fui com:

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

Parece funcionar muito bem, espero que isso ajude alguém!

Veja como fazê-lo da maneira ES7, se você estiver usando o transpiler Babel ou o Typescript 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;
  }
}

Em seu outro asyncescopo, você pode verificar facilmente se existe um URL:

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

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

Eu uso esse script para verificar se existe um arquivo (ele também lida com o problema de origem cruzada):

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

Observe que o seguinte erro de sintaxe é gerado quando o arquivo que está sendo verificado não contém JSON.

SyntaxError não capturado: token inesperado <

Uma chamada assíncrona para verificar se existe um arquivo é a melhor abordagem, pois não prejudica a experiência do usuário, aguardando uma resposta do servidor. Se você fizer uma chamada .opencom o terceiro parâmetro definido como false (como em muitos exemplos acima, por exemplo http.open('HEAD', url, false);), esta será uma chamada síncrona e você receberá um aviso no console do navegador.

Uma abordagem melhor é:

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

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

Para um computador cliente, isso pode ser alcançado por:

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 é o meu programa para transferir um arquivo para um local específico e mostra um alerta se ele não existir

Função JavaScript para verificar se existe um arquivo:

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

Primeiro cria a função

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

Depois de usar a função da seguinte maneira

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

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

Esta é uma adaptação à resposta aceita, mas não consegui o que precisava da resposta e tive que testar se funcionava como um palpite, por isso estou colocando minha solução aqui.

Precisávamos verificar se um arquivo local existia e permitir apenas que o arquivo (um PDF) fosse aberto se ele existisse. Se você omitir o URL do site, o navegador determinará automaticamente o nome do host - fazendo com que ele funcione no host local e no 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");

    }
});

O que você precisa fazer é enviar uma solicitação ao servidor para que ele faça a verificação e, em seguida, enviar o resultado para você.

Com que tipo de servidor você está tentando se comunicar? Pode ser necessário escrever um pequeno serviço para responder à solicitação.

Isso não aborda a questão do OP, mas para quem está retornando resultados de um banco de dados: aqui está um método simples que eu usei.

Se o usuário não fizesse o upload de um avatar, o avatarcampo seria NULLassim, então eu inserirei uma imagem de avatar padrão no imgdiretório

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

então

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

Funciona para mim, use o iframe para ignorar os navegadores. Mostrar mensagem de erro GET

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

Queria uma função que retornasse um valor booleano, encontrei problemas relacionados ao fechamento e assincronicidade. Eu resolvi desta maneira:

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