Comment puis-je vérifier si le fichier existe dans jQuery ou JavaScript pur?

Une approche similaire et plus à jour.

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

Cela fonctionne pour moi:

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

J'ai utilisé ce script pour ajouter d'autres images

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

HTML:

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

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

Tant que vous êtes tester des fichiers sur le même domaine cela devrait fonctionner:

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

Veuillez noter que cet exemple utilise une requête GET, qui, en plus d'obtenir les en-têtes (Tout ce dont vous avez besoin pour vérifier que le fichier existe) obtient le fichier entier. Si le fichier est assez grand, cette méthode peut prendre un certain temps à compléter.

La meilleure façon de le faire serait de changer cette ligne: req.open('GET', url, false); à req.open('HEAD', url, false);

Je recevais un problème d'autorisations inter-domaines en essayant d'exécuter la réponse à cette question, donc je suis allé avec:

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

Il semble fonctionner très bien, j'espère que cela aide quelqu'un!

Voici comment le faire de manière ES7, si vous utilisez Babel transpiler ou 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;
  }
}

Ensuite, dans votre autre portée async, Vous pouvez facilement vérifier si l'url existe:

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

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

J'utilise ce script pour vérifier si un fichier existe (il gère également le problème d'origine croisée):

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

Notez que l'erreur de syntaxe suivante est levée lorsque le fichier en cours de vérification ne contient pas de JSON.

SyntaxError non intercepté: jeton inattendu

Pour un ordinateur client, ceci peut être réalisé par:

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

C'est mon programme pour transférer un fichier à un emplacement spécifique et affiche une alerte s'il n'existe pas

Crée d'Abord la fonction

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

Après avoir utilisé la fonction comme suit

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

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

Fonction JavaScript pour vérifier si un fichier existe:

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

C'est une adaptation à la réponse acceptée, mais je n'ai pas pu obtenir ce dont j'avais besoin de la réponse, et j'ai dû tester cela car c'était une intuition, donc je mets ma solution ici.

Nous avions besoin de vérifier l'existence d'un fichier local, et d'autoriser uniquement le fichier (un PDF) à s'ouvrir s'il existait. Si vous omettez L'URL du site web, le navigateur déterminera automatiquement le nom d'hôte-ce qui le fera fonctionner dans localhost et sur le serveur:

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

    }
});

Ce que vous devez faire est d'envoyer une requête au serveur pour qu'il fasse la vérification, puis de vous renvoyer le résultat.

Avec quel type de serveur essayez-vous de communiquer? Vous devrez peut-être Écrire un petit service pour répondre à la demande.

Cela ne répond pas à la question de L'OP, mais pour quiconque renvoie des résultats à partir d'une base de données: Voici une méthode simple que j'ai utilisée.

Si l'utilisateur n'a pas téléchargé un avatar, le Champ avatar serait NULL, donc j'insérerais une image avatar par défaut dans le répertoire img.

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

Puis

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

Cela fonctionne pour moi, utilisez iframe pour ignorer les navigateurs afficher le message D'erreur GET

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

Un appel asynchrone pour voir si un fichier existe est la meilleure approche, car il ne dégrade pas l'expérience utilisateur en attendant une réponse du serveur. Si vous faites un appel à .open avec le troisième paramètre défini sur false (comme dans de nombreux exemples ci-dessus, par exemple http.open('HEAD', url, false);), Il s'agit d'un appel synchrone, et vous obtenez un avertissement dans la console du navigateur.

Une meilleure approche est:

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

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

Je voulais une fonction qui retournerait un booléen, j'ai rencontré des problèmes liés à la fermeture et à l'asynchronicité. J'ai résolu de cette façon:

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