web-dev-qa-db-fra.com

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?

javascriptjqueryfile-io
241
usertest

Avec jQuery:

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

MODIFIER:

Voici le code pour vérifier le statut 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 l'état du code d'état HTTP 200 (succès), à la place.

403
cichy

Une approche similaire et plus à jour.

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })
66
Matthew James Davis

Cela fonctionne pour moi:

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

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

41
Gino

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 si le fichier existe), récupère l'intégralité du fichier . Si le fichier est suffisamment gros, 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); en req.open('HEAD', url, false);

18
Moob

Je rencontrais un problème d'autorisations entre domaines lorsque j'essayais de répondre à cette question. Je suis donc allé avec: 

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

Cela semble bien fonctionner, espérons que cela aidera quelqu'un!

15
Shaun

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 étendue 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
4
Nik Sumeiko

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 générée lorsque le fichier en cours de vérification ne contient pas de code JSON.

Uncaught SyntaxError: Jeton inattendu <

3
Gëzim Musliaj

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;
    }
}
2
Ani Menon

Un appel asynchrone pour vérifier si un fichier existe constitue la meilleure approche car il ne nuit pas à l'expérience utilisateur en attendant une réponse du serveur. Si vous appelez .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 recevez 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/

2
Jim Bergman

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 à un emplacement spécifique et affiche une alerte s'il n'existe pas

1
yasir amin 9th-b DR.VSMPS

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

1
Vladimir Salguero

Ceci est une adaptation à la réponse acceptée, mais je ne pouvais pas obtenir ce dont j'avais besoin de la réponse, et je devais vérifier si tout fonctionnait comme prévu, alors je présente ma solution ici.

Nous devions vérifier qu'un fichier local existait et n'autoriser le fichier (un PDF) à s'ouvrir que 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");

    }
});
1
Josh Harris

Cela fonctionne pour moi, utilisez iframe pour ignorer les navigateurs et 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
 }
0
AnhMV

Je voulais une fonction qui rendrait 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);
},
0
Gianlorenzo Lenza

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 n’avait pas téléchargé d’avatar, le champ avatar serait NULL, aussi j’insérerais une image d’avatar par défaut à partir du 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="">
0
timgavin

Ce que vous devez faire est d’envoyer une demande au serveur pour qu’il vérifie, 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.

0
MadcapLaugher