Afficher la liste des fichiers dans un répertoire

**emilie93** · 22/05/2022, 19h35

s'il vous plait je viens vers vous pour la bonne compilation d'un code javascript qui vas m'aidé à lister les noms des fichiers dans un répertoire

le répertoire public/images contient les fichiers suivants : 'PSD', 'TDR', 'MH', 'MLR', 'ADP', 'SY02-1133', 'SY01-1122'

au lieu de les écrire un par un sur mon code script en dessous

y'a t'il une solution pour que le code les affichent automatiquement ?? et merci d'avance

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
function loadLabeledImages() {
      var labels = ['PSD', 'TDR', 'MH', 'MLR', 'ADP', 'SY02-1133', 'SY01-1122'];

**rafoim** · 22/05/2022, 22h10

Bonjour,

Est-ce normal que le code n'ait que deux lignes. Pour l'instant, la fonction n'est pas fermée et elle n'est pas appelée.
Et tu veux écrire tes noms tes fichiers où? Dans la console? Ailleurs?

**emilie93** · 22/05/2022, 22h21

je veux écrire les noms de ces fichiers Dans la console console.log(nom des fichiers )

**emilie93** · 22/05/2022, 22h31

Envoyé par rafoim

Bonjour,

Est-ce normal que le code n'ait que deux lignes. Pour l'instant, la fonction n'est pas fermée et elle n'est pas appelée.
Et tu veux écrire tes noms tes fichiers où? Dans la console? Ailleurs?

le code que j'ai du mal à le crée j'ai presque 150 fichiers dans le répertoire public/images
au lieu des les écrire un par un je cherche une méthode pour un listing automatique dans la var labels = [ listing automatique]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function loadLabeledImages() {
 
var labels = ['PSD', 'TDR', 'MH', 'MLR', 'ADP', 'SY02-1133', 'SY01-1122'];
 
return Promise.all(
 
labels.map(async (label)=>{
 
console.log(label)
                }
            }

**ASCIIDEFOND** · 23/05/2022, 09h49

Bonjour à tous,

Et comme ça ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body onload="getfichier ()">
    <input type="file" id="inputfiles" multiple="multiple" onchange="getfichier ()" />
    
    <script>
        function getfichier() {
            var listefichiers = [],
                inputfiles = document.getElementById("inputfiles");
 
            for (var x = 0; x < inputfiles.files.length; x += 1) {
                var fichier = inputfiles.files[x];
                if ('name' in fichier) {
                    listefichiers.push(fichier.name);
                }
            }
            console.log(listefichiers);
        }
    </script>
</body>

**darkstar123456** · 23/05/2022, 11h43

Bonjour,

Il n'est pas possible de lire un dossier/fichiers depuis Javascript.
Javascript est un langage client et donc ne peut pas lire de dossier sur le serveur.

Le seul moyen serait de lire le dossier en PHP et passer les valeurs au JavaScript soit via une requête AJAX, soit directement au chargement

Mais bon, autant tout faire en PHP ^^

Pour récupérer les fichiers d'un dossier dans un array, vous pouvez utiliser scandir()

Voici un exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// Retourne tous les fichiers + .. et .
$images = array_diff(scandir(__DIR__.'/images'));
// Pour éviter d'avoir .. et ., on utilise array_diff()
// Source : https://www.php.net/manual/fr/function.scandir.php#107215
$images = array_diff(scandir(__DIR__.'/images'), ['..', '.']);

**emilie93** · 23/05/2022, 13h51

Envoyé par ASCIIDEFOND

Bonjour à tous,...

je vous tiens au courant après essaie

merciiiiiiii bcp

**emilie93** · 23/05/2022, 14h00

peut ont les récupérés via une requête sql ? d'une table fichier !!

id | Fichier
1 PSD
2 TDR
3 MH
4 MLR
5 ADP
6 SY02-1133
7 SY01-1122

**emilie93** · 23/05/2022, 14h26

Envoyé par darkstar123456

...

passer les valeurs au JavaScript soit via une requête AJAX, soit directement au chargement....... COMMENT???

**darkstar123456** · 23/05/2022, 14h56

Bonjour,

Comme décrit dans mon code PHP.
Ce code récupère les fichiers d'un dossier pour les sauvegarder dans un tableau PHP.
Il suffit alors de faire un boucle sur ce tableau et de faire ce qu'on veut avec si on veut les afficher dès le chargement

Sinon, il faut encoder le tableau pour être lisible en Javascript.
Pour cela, on va utiliser la fonction PHP json_encode()

En reprenant mon exemple précédent qui liste les fichiers du sous-dossier images du dossier courant (au fichier PHP)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php $images = array_diff(scandir(__DIR__ . '/images'), ['..', '.']); ?>
<script>
    var images_dans_le_js = <?= json_encode($images); ?>;
    console.log('Liste des images', images_dans_le_js);
</script>

Le principe étant de tout mettre dans un array et d'ensuite utiliser json_encode(), c'est le même principe si on récupère les données depuis une base de données.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// Depuis une BDD
$sth = $dbh->prepare("SELECT id, filename FROM images");
$sth->execute();
$images = $sth->fetchAll();
?>
<script>
    var images_dans_le_js = <?= json_encode($images); ?>;
    console.log('Liste des images', images_dans_le_js);
</script>