Como faço para verificar se o arquivo existe em jQuery ou JavaScript puro?

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

Com 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 jQuery

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

Pequenas alterações e poderia verificar o status do código de status HTTP 200 (sucesso).

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 este script para adicionar imagem alternativa

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

HTML:

  

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

Enquanto você estiver testando arquivos no mesmo domínio, isso deve 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, note que este exemplo está usando uma solicitação GET, que além de obter os headers (tudo que você precisa para verificar o tempo que o arquivo existe) obtém o arquivo inteiro. Se o arquivo for grande o suficiente, esse método pode demorar um pouco para ser concluído.

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

Eu estava recebendo um problema de permissions entre domínios ao tentar executar a resposta a essa pergunta, então fui com:

 function UrlExists(url) { $('').load(function() { return true; }).bind('error', function() { return false; }); } 

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

Veja como fazer isso no ES7, se você estiver usando o Babel transpiler 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 seguida, dentro do seu outro escopo async , você pode verificar facilmente se o URL existe:

 const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext'); console.log(isValidUrl); // true || false 

Eu uso este script para verificar se existe um arquivo (também lida com a questão da origem cruzada):

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

Observe que o seguinte erro de syntax é lançado quando o arquivo que está sendo verificado não contém JSON.

Untaught SyntaxError: Token inesperado <

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 alerta se ele não existe

Primeiro cria a function

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

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

Esta é uma adaptação para a resposta aceita, mas eu não consegui o que eu precisava da resposta, e tive que testar isso funcionou como se fosse um palpite, então estou colocando minha solução aqui.

Precisávamos verificar se existia um arquivo local e permitir que o arquivo (um PDF) fosse aberto, se ele existisse. Se você omitir a 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 de volta o resultado para você.

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

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

Se o usuário não fizesse upload de um avatar, o campo de avatar seria NULL , então eu inseriria uma imagem de avatar padrão do diretório img .

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

então

  

Ele funciona para mim, use iframe para ignorar os navegadores mostram mensagem de erro GET

  var imgFrame = $(''); if ($(imgFrame).find('img').attr('width') > 0) { // do something } else { // do something } 

Uma chamada assíncrona para ver se existe um arquivo é a melhor abordagem, porque não prejudica a experiência do usuário aguardando uma resposta do servidor. Se você fizer uma chamada para .open com o terceiro parâmetro definido como false (como em muitos exemplos acima, por exemplo, http.open('HEAD', url, false); ), essa é uma chamada síncrona e você recebe 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/

Eu queria uma function que retornasse um booleano, encontrei problemas relacionados a fechamento e assincronia. Eu resolvi assim:

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