Comment vérifier si le fichier existe en jQuery ou en JavaScript pur?

Comment vérifier si un fichier sur mon serveur existe en jQuery ou en JavaScript pur?

Avec jQuery:

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

ÉDITER:

Voici le code pour vérifier l'état 404, sans utiliser jQuery

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

De petits changements et il pourrait vérifier le code d'état HTTP 200 (succès) à la place.

EDIT 2: Étant donné que la synchronisation XMLHttpRequest est déconseillée, vous pouvez ajouter une méthode utilitaire comme celle-ci pour le faire en mode asynchrone:

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

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 une image alternative

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 testez 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 la météo du fichier), obtient tout le fichier. Si le fichier est suffisamment volumineux, cette méthode peut prendre un certain temps.

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

J'obtenais un problème d'autorisations entre domaines lorsque j'essayais d'exécuter la réponse à cette question, j'ai donc choisi:

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

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

Voici comment procéder de manière ES7, si vous utilisez le transpilateur Babel 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 asyncétendue, 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 de l'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 capturée: jeton inattendu <

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 appelez .openavec 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 consiste à:

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/

Pour un ordinateur client, cela 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")
}

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

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

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

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

Nous devions vérifier qu'un fichier local existait et ne permettre l'ouverture du fichier (un PDF) que s'il existait. Si vous omettez l'URL du site Web, le navigateur déterminera automatiquement le nom d'hôte - en le faisant 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 auriez à faire serait d'envoyer une demande 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 du PO, mais pour quiconque renvoie des résultats d'une base de données: voici une méthode simple que j'ai utilisée.

Si l'utilisateur ne téléchargeait pas d'avatar, le avatarchamp le serait NULL, alors j'insérerais une image d'avatar par défaut du imgrépertoire.

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 un message d'erreur GET

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

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