Lister fichiers d'un dossier

Version imprimable

27/11/2013, 21h48
byrong

Lister fichiers d'un dossier

Bonsoir,

J'ai un petit soucis.

J'aimerais, à l'aide de jquery, ajouter dynamiquement des balises <li><img...></li> afin d'ajouter dans une galerie photo de nouvelles images.

Avec ca j'aimerais aussi lister les images contenus dans un dossier serveur.

Je pense que pour faire cela je dois utiliser un peu de PHP car HTML5 ne permets pas ce genre de chose.

Pensez-vous que cela est possible avec html5 et un peu de php et jquery?

Merci pour votre aide
29/11/2013, 12h00
Sayrus

Oui c'est possible.

Il suffit de créer un fichier PHP qui se chargera de lister les fichiers (voir doc PHP, il y a une fonction de lecture et même des exemples avec lecture de fichiers, mais je n'ai plus le lien comme ça).

Ensuite faire appel à ce fichier PHP via la fonction $.ajax de jQuery et lui passer en paramètre POST le numéro de page à afficher (les infos de pagination pour construire ta requête)

Ensuite, tu peux créer ton code Jquery principal, qui appelera cette page avec ajax et alimentera la galerie avec la fonction "append('<li><img...</li>')".

Cela donnera l'effect d'un chargement google image ou d'un chargement twitter, flicker, etc.
30/11/2013, 01h29
ABCIWEB

Citation:

Envoyé par byrong

Pensez-vous que cela est possible avec html5 et un peu de php et jquery?

Merci pour votre aide

Oui mais c'est pas "un peu", c'est plutôt "beaucoup" si tu veux quelque chose d'assez complet et réutilisable (plusieurs centaines de lignes minimum).
En fait si tu fais un système d'upload direct pour chaque image ajoutée cela peut être assez simple.
Si par contre tu souhaites avoir un popup javascript qui liste tes dossiers et permette de choisir un fichier à ajouter, c'est beaucoup moins simple (ou pour le moins beaucoup plus long à faire).
Essaies de regarder s'il n'existe pas quelque chose de déjà fait sinon cela te prendras un certain temps et demande des connaissances assez conséquentes en php jquery et html5.
02/12/2013, 10h32
byrong

Bonjour et deja merci pour vos réponses.

En fait j'aimerais simplement que des balises img s'ajoutent automatiquement en fonction du contenu d'un dossier...

Ici je vais regarder comment faire le listing via php. un grand merci deja

Salut,

Pour PHP, il existe la fonction scandir(). Elle te permet de scanner le contenu du dossier passé en paramètre. A toi de lui dire quoi en faire en parcourant à l'aide d'une boucle foreach par exemple.
On veut lister le dossier $repertoire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
function listing($repertoire)
 
if( file_exists($repertoire) ) { // on vérifie que le dossier existe
 
    $dirs = scandir($repertoire); // on récupère son contenu
    natcasesort($dirs); // on tri
 
    if( count($dirs) > 2 ) { // on vérifie que le dossier n'est pas vide					
 
        foreach( $dirs as $dir ) { //on parcours le dossier
 
			if($dir != '.' && $dir != '..' ){ // on elimine les cas ./ et ../ (serveur)
 
				if (is_dir($repertoire.'/'.$dir)){ // si c'est un dossier, on le lit
					// Ton code pour mise en forme (ex: echo "<ul><li>" . htmlentities($dir) . "</li></ul>;"
					lister($repertoire . '/' . $dir) //on scan le sous-répertoire
				}
				else{ //c'est un fichier, on l'affiche
				// ex : echo "<a data-rel=\"" . htmlentities( $repertoire . '/' . $dir ) . "\" href=\"#\">" . htmlentities($dir) . "</a></li>";
				}
			};
		};
	}
	else { // si ton dossier ne contient rien
		echo "<li class=\"vide\"></li>";
	};
};
?>

Il s'agit d'une base de réflexion, à toi de comprendre le principe et de l'adapter à tes besoins.
D'autre part, Google te donnera un tas d'exemples ou de plugin ("JqueryTree" par exemple).
Ne réinvente pas la roue ;-)
A+