Come posso verificare se il file esiste in jQuery o JavaScript puro?

Come posso verificare se esiste un file sul mio server in 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
    }
});

MODIFICARE:

Ecco il codice per controllare lo stato 404, senza usare jQuery

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

Piccole modifiche e potrebbe invece verificare lo stato del codice di stato HTTP 200 (esito positivo).

MODIFICA 2: poiché la sincronizzazione XMLHttpRequest è obsoleta, è possibile aggiungere un metodo di utilità come questo per farlo asincrono:

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

Un approccio simile e più aggiornato.

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

Questo funziona per me:

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

ho usato questo script per aggiungere un'immagine 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

Finché stai testando i file sullo stesso dominio, questo dovrebbe funzionare:

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

Si noti che in questo esempio viene utilizzata una richiesta GET, che oltre a ottenere le intestazioni (tutto ciò che serve per verificare il tempo in cui esiste il file) ottiene l'intero file. Se il file è abbastanza grande, il completamento di questo metodo può richiedere del tempo.

Il modo migliore per farlo sarebbe cambiare questa linea: req.open('GET', url, false);areq.open('HEAD', url, false);

Stavo ricevendo un problema di autorizzazioni tra domini quando provavo a eseguire la risposta a questa domanda, quindi sono andato con:

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

Sembra funzionare alla grande, spero che questo aiuti qualcuno!

Ecco come farlo in modo ES7, se stai usando il transpiler di Babel 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;
  }
}

Quindi, all'interno dell'altro asyncambito, puoi facilmente verificare se esiste l'URL:

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

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

Uso questo script per verificare se esiste un file (gestisce anche il problema dell'origine incrociata):

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

Si noti che il seguente errore di sintassi viene generato quando il file da controllare non contiene JSON.

Uncaught SyntaxError: token imprevisto <

Una chiamata asincrona per vedere se esiste un file è l'approccio migliore, perché non degrada l'esperienza dell'utente in attesa di una risposta dal server. Se si effettua una chiamata .opencon il terzo parametro impostato su false (come in molti esempi precedenti, ad esempio http.open('HEAD', url, false);), si tratta di una chiamata sincrona e viene visualizzato un avviso nella console del browser.

Un approccio migliore è:

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/

Per un computer client questo può essere ottenuto 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")
}

Questo è il mio programma per trasferire un file in una posizione specifica e mostra un avviso se non esiste

Funzione JavaScript per verificare l'esistenza di un file:

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

Innanzitutto crea la funzione

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

Dopo aver usato la funzione come segue

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

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

Questo è un adattamento alla risposta accettata, ma non ho potuto ottenere ciò di cui avevo bisogno dalla risposta, e ho dovuto testarlo funzionando perché era un sospetto, quindi sto mettendo la mia soluzione qui.

Dovevamo verificare l'esistenza di un file locale e consentire l'apertura del file (un PDF) solo se esisteva. Se si omette l'URL del sito Web, il browser determinerà automaticamente il nome host, facendolo funzionare in localhost e sul server:

$.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");

    }
});

Quello che dovresti fare è inviare una richiesta al server affinché esegua il controllo e quindi rispedirti il ​​risultato.

Con quale tipo di server stai cercando di comunicare? Potrebbe essere necessario scrivere un piccolo servizio per rispondere alla richiesta.

Questo non affronta la domanda del PO, ma per chiunque stia restituendo risultati da un database: ecco un metodo semplice che ho usato.

Se l'utente non ha caricato un avatar, il avatarcampo sarebbe NULL, quindi inserisco un'immagine avatar predefinita dalla imgdirectory.

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

poi

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

Funziona per me, usa iframe per ignorare i browser mostra il messaggio di errore GET

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

Volevo una funzione che restituisse un valore booleano, ho riscontrato problemi legati alla chiusura e all'asincronicità. Ho risolto in questo modo:

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