Code Snippets zu Blogbeitrag https://sevenx.de/einfach-mit-php-ordner-auslesen-und-dateien-und-bilder-anzeigen-tutorial/

01-simple-loop.php

<?php 
$alledateien = scandir('files'); //Ordner "files" auslesen 
foreach ($alledateien as $datei) { // Ausgabeschleife 
echo $datei."<br />"; //Ausgabe Einzeldatei 
}; 
?>

02-advanced-loop.php

<ul> 
<?php 

// Ordnername 
$ordner = "files"; //auch komplette Pfade möglich ($ordner = "download/files";) 

// Ordner auslesen und Array in Variable speichern $alledateien = scandir($ordner); // Sortierung A-Z 

// Sortierung Z-A mit scandir($ordner, 1) // Schleife um Array "$alledateien" aus scandir Funktion auszugeben 
// Einzeldateien werden dabei in der Variabel $datei abgelegt 

foreach ($alledateien as $datei) { 

// Zusammentragen der Dateiinfo 
$dateiinfo = pathinfo($ordner."/".$datei); 
//Folgende Variablen stehen nach pathinfo zur Verfügung 
// $dateiinfo['filename'] =Dateiname ohne Dateiendung *erst mit PHP 5.2 
// $dateiinfo['dirname'] = Verzeichnisname 
// $dateiinfo['extension'] = Dateityp -/endung 
// $dateiinfo['basename'] = voller Dateiname mit Dateiendung 

// Größe ermitteln zur Ausgabe 
$size = ceil(filesize($ordner."/".$datei)/1024); 
//1024 = kb | 1048576 = MB | 1073741824 = GB 

// scandir liest alle Dateien im Ordner aus, zusätzlich noch "." , ".." als Ordner 
// Nur echte Dateien anzeigen lassen und keine "Punkt" Ordner 
// _notes ist eine Ergänzung für Dreamweaver Nutzer, denn DW legt zur besseren Synchronisation diese Datei in den Orndern ab 
if ($datei != "." && $datei != ".." && $datei != "_notes") { 
?> 
<li>
<a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>"><?php echo $dateiinfo['filename']; ?></a> (<?php echo $dateiinfo['extension']; ?> | <?php echo $size ; ?>kb)
</li> 
<?php }; }; 
?> 
</ul>

03-gallery-function.php

<ul id="galerie"> 
<?php 
// Ordnername 
$ordner = "images"; //auch komplette Pfade möglich ($ordner = "download/files";) 

// Ordner auslesen und Array in Variable speichern 
$allebilder = scandir($ordner); // Sortierung A-Z 
// Sortierung Z-A mit scandir($ordner, 1) 

// Schleife um Array "$alledateien" aus scandir Funktion auszugeben 
// Einzeldateien werden dabei in der Variabel $datei abgelegt 
foreach ($allebilder as $bild) { 

// Zusammentragen der Dateiinfo 
$bildinfo = pathinfo($ordner."/".$bild); 
//Folgende Variablen stehen nach pathinfo zur Verfügung 
// $dateiinfo['filename'] =Dateiname ohne Dateiendung *erst mit PHP 5.2 
// $dateiinfo['dirname'] = Verzeichnisname 
// $dateiinfo['extension'] = Dateityp -/endung 
// $dateiinfo['basename'] = voller Dateiname mit Dateiendung 

// Größe ermitteln für Ausgabe 
$size = ceil(filesize($ordner."/".$bild)/1024); 
//1024 = kb | 1048576 = MB | 1073741824 = GB 

// scandir liest alle Dateien im Ordner aus, zusätzlich noch "." , ".." als Ordner 
// Nur echte Dateien anzeigen lassen und keine "Punkt" Ordner 
// _notes ist eine Ergänzung für Dreamweaver Nutzer, denn DW legt zur besseren Synchronisation diese Datei in den Orndern ab 
// Thumbs.db ist eine Ergänzung unsichtbare Dateiergänzung die von ACDSee kommt 
// um weitere ungewollte Dateien von der Anzeige auszuschließen kann man die if Funktion einfach entsprechend erweitern 
if ($bild != "." && $bild != ".." && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 
?> 
<li> 
<a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>"> 
<img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a> 
<span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span> 
</li> 
<?php }; }; ?> 
</ul>

04-gallery-css.html

ul#galerie { 
	padding:0; 
	margin:0; 
	list-style-type:none; 
	font-family:Arial, Helvetica, sans-serif; 
} 

ul#galerie li{ 
	padding: 3px; 
	background-color:#ebebeb; 
	border:1px solid #CCC; 
	float:left; 
	margin:0 10px 10px 0; 
} 

ul#galerie li:hover{ 
	border:1px solid #333; 
} 

ul#galerie li span{ 
	display:block; 
	text-align:center; 
	font-size:10px; 
} 

ul#galerie li a img{ 
	border:none; 
} 

05-mixed-content-function.php

<?php
$ordner = "mixed";
$alledateien = scandir($ordner);          				

foreach ($alledateien as $datei) {
	$dateiinfo = pathinfo($ordner."/".$datei); 
	$size = ceil(filesize($ordner."/".$datei)/1024); 
	if ($datei != "." && $datei != ".."  && $datei != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 

			//Bildtypen sammeln
			$bildtypen= array("jpg", "jpeg", "gif", "png");
			//Dateien nach Typ prüfen, in dem Fall nach Endungen für Bilder filtern
			if(in_array($dateiinfo['extension'],$bildtypen))
  			{
	?>
            <div class="galerie">
                <a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>">
                <img src="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>" width="140" alt="Vorschau" /></a> 
                <span><?php echo $dateiinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
            </div>
    		<?php 
			// wenn keine Bildeindung dann normale Liste für Dateien ausgeben
			} else { ?>
            <div class="file">
            	<a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>">&raquo <?php echo $dateiinfo['filename']; ?></a> (<?php echo $dateiinfo['extension']; ?> | <?php echo $size ; ?>kb)
            </div>
            <?php } ?>
<?php
	};
 };
?>

06-mixed-content-styles.html

<style type="text/css">
div.galerie{
	padding: 3px;
	background-color:#ebebeb;
	border:1px solid #CCC;
	float:left;
	margin:10px 10px 0  0;
	font-family:Arial, Helvetica, sans-serif;	
}
div.galerie:hover{
	border:1px solid #333;
}
div.galerie span{
	display:block;
	text-align:center;
	font-size:10px;
}
div.galerie a img{
		border:none;
}
div.file {
	padding:4px 4px 4px 30px;
}
div.file.even{
	background-color: #ebebeb;
}
div.file a {
	text-decoration:none;
}
div.file:hover {
	background-color:#CCC;
}
</style>

07-mixed-content-js.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.file:even').addClass('even');
});
</script>