Comment tester si un fichier existe avec du javascript ?

Daidalos June 11, 2019


Exemple de comment tester si un fichier existe avec du javascript:

Tester si le fichier existe

Soit le fichier json suivant data.json:

{
    "file_1": {
        "status": "0",
        "author": "John",
        "size": "3245"
    },
    "file_2": {
        "status": "1",
        "author": "Jane",
        "size": "19462"
    }
}

Pour tester si le fichier existe avec du javascript on peut créer une simple page html (test.html par exemple) et faire comme dans cet exemple:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>

window.onload = function(){

$.get("data.json")
    .done(function(data){
    console.log('file is ready !');
    console.log(data);
    }).fail(function() { 
        console.log('Oups ! file not found ...');
    })

}

</script>

</body>

</html>

Note: pour pouvoir utiliser le code ci-dessus il est nécessaire de lancer un http serveur. Pour cela on peut par exemple utiliser python 3 et lancer la commande suivante dans votre terminal:

python -m http.server 8001

puis d'ouvrir le web browser chrome par exemple et se rendre dans l'url suivante http://0.0.0.0:8001/. Avec chrome on peut alors afficher la console javascript en allant dans le menu View -> Developer -> JavaScript Console, permettant ainsi de lancer et de tester le code ci-dessus.

On peut alors tester deux cas: (1) le fichier data.json existe:

Comment tester si un fichier existe avec du javascript ?

(2) le fichier data.json n'existe pas:

Comment tester si un fichier existe avec du javascript ?

Tester si le fichier existe à intervalle régulier

On peut aussi tester à intervalle régulier (par exemple toutes les secondes) si le fichier existe en utilisant la fonction setInterval(). Soit un dossier quelconque suivant contenant la page test.html:

/LabTest/
    test.html

avec le code test.html suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>

window.onload = function(){

var timerForLoadingResult = setInterval(ajaxCall, 1000);

function ajaxCall() {
$.get("data.json")
    .done(function(data){
    console.log(data);
    console.log('file is ready !');
    clearInterval(timerForLoadingResult)  
    }).fail(function() { 
        console.log('Oups ! file not found ...');
    })
}

}

</script>

</body>

</html>

En allant alors sur la page http://0.0.0.0:8001/test.html, le code ci dessus va tester toutes les secondes si le fichier data.json existe. Une fois que le fichier existe le code va arrêter la fonction ajaxCall() avec la commande clearInterval(timerForLoadingResult):

Comment tester si un fichier existe avec du javascript ?

Arrêter de tester si le fichier existe au bout d'un temps donné

On peut aussi décider de stopper la recherche d'un fichier si cela prend trop de temps. Par exemple au bout de 10 secondes:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>

window.onload = function(){

var startTime = new Date().getTime();
var interval = setInterval(function(){
    if(new Date().getTime() - startTime > 10000){
        clearInterval(interval);
        return;
    }
    console.log('Hello World !');
}, 2000);

}

</script>

</body>

</html>

Comment tester si un fichier existe avec du javascript ?

Exemple avec le fichier data.json:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>

window.onload = function(){

var startTime = new Date().getTime();

var timerForLoadingResult = setInterval(ajaxCall, 1000);

function ajaxCall() {
$.get("data.json")
    .done(function(data){
    console.log(data);
    console.log('file is ready !');
    clearInterval(timerForLoadingResult)
    }).fail(function() { 
        console.log('Oups ! file not found ...');
        if(new Date().getTime() - startTime > 10000){
            clearInterval(timerForLoadingResult);
            return;
        }
    })
}


}

</script>

</body>

</html>

Comment tester si un fichier existe avec du javascript ?

Références

Liens Site
Wait for a file using Jquery stackoverflow
how do you set interval to ajax call in jquery [closed] stackoverflow
how to make a setInterval stop after some time or after a number of actions? stackoverflow
Using jQuery's ajax method to retrieve images as a blob stackoverflow
How do I check if file exists in jQuery or pure JavaScript? stackoverflow
Asynchronous JavaScript #2 - AJAX Requests youtube
JavaScript setInterval() Function - p5.js Tutorial youtube

Licence


Activity


Google Ads