Tutorial: Einfach mit PHP Ordner auslesen und Dateien und Bilder anzeigen.

Mit PHP ist es auf einfache Art und Weise möglich einen Ordner auszulesen und dessen Inhalt auch entsprechend anzeigen zu lassen. Ich habe das Thema etwas aufgebohrt und möchte hier ein paar verschiedene Möglichkeiten darstellen. Mein Code bezieht sich auf die aktuelle 5er PHP Version, wer tatsächlich noch mit PHP 4 arbeitet, sollte schleunigst ein Update vornehmen. Das ist eine Frage der Sicherheit und Funktionalitäten werden mit Versionsupdates auch nicht weniger. Zur Demonstration habe ich im Hauptordner 3 Unterordner angelegt.

• “files” = Dokumente und Zip-Datei
• “images” = Bildateien (jpg)
• “mixed” = Dokumente und Bilddateien gemischt

Im weiteren werde ich jetzt auf diese Ordner zugreifen und eine einfache Ausgabe der darin enthaltenen Dateien erzeugen. Besonders beim “images” Ordner habe ich mit ein bisschen jQuery und CSS eine gute Möglichkeit das ganze auch noch schick zu präsentieren, aber dazu später mehr. Fangen wir an!

Einleitung – einfache Ausgabe

Mit Version 5 hielt die Funktion scandir() Einzug in die PHP Welt. Diese liest den angegebenen Ordner aus und bildet einen Array mit den Dateien im Ordner. Mit einer foreach Schleife kann ich diesen Array nun ausgeben lassen und so mit 3 Zeilen Code den Inhalt eines Ordners anzeigen lassen.

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

Standardmäßig wird der mit scandir() gebildete Array alphabetisch aufsteigend sortiert. Hier kann ich durch den zusätzlichen Parameter 1 die Sortierung auch umkehren. Und so sieht das Ganze bisher in Aktion aus: Beispielseite Wie im Beispiel zu sehen, werden neben den “echten” Dateien auch “.”, “..” ausgelesen. Die stören natürlich etwas, aber soviel erstmal zur Einleitung.

Dateien aus Ordner auslesen und ausgeben

Anzeige als Liste inkl. Dateigröße, Dateityp und Direktverlinkung

Jetzt soll das Ganze zu einer sinnvollen Anzeige erweitert werden. Dazu sind folgende Ergänzungen im Code notwendig.

• Ordnername zur Wiederverwendung in Variable speichern
• Dateiinformationen mit pathinfo() Funktion abfragen
• Dateigröße mit filsize() Funktion ermitteln und umrechnen
• “.” und “..” Ordner von Anzeige ausschließen
• HTML ergänzen – Ausgabe als Liste mit Links zur Datei

Code

<ul>
<?php
$ordner = "files"; //auch Pfade möglich ($ordner = "download/files";)
$alledateien = scandir($ordner);

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

        // verhindert Anzeige von "." und ".."
	if ($datei != "." && $datei != "..") {
	?>
    <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>

Übrigens bin ich kein Freund davon umfangreiche HTML Ausgaben in echo Befehle zu packen, deshalb trenne ich PHP von HTML soweit das möglich ist. Und so sieht es jetzt noch ohne CSS aus.
Demo

Bilder aus Ordner auslesen und anzeigen

Anzeigen als Vorschau inkl. Dateiname, Dateigröße und Direktverlinkung

Befinden sich ausschließlich Bilder im Ordner ist der Code von der Dateianzeige oben genauso für den Bilderordner verwendbar. Einzig die HTML Ausgabe innerhalb der foreach Schleife ändert sich ein wenig.

Code

<ul id="galerie">
<?php
$ordner = "images";

$allebilder = scandir($ordner); // Sortierung A-Z

foreach ($allebilder as $bild) {
	$bildinfo = pathinfo($ordner."/".$bild);
	$size = ceil(filesize($ordner."/".$bild)/1024);

	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>

Mit ein bisschen CSS lässt sich die ausgegebene Liste ein bisschen schicker darstellen.

CSS Code

<style type="text/css">
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;
}
</style>

Demo

Weitere Beispiel

Ergänzt man den Code um ein bisschen jQuery in dem man auf Slideviewer, Slideshow oder Lightbox Plugins zurückgreift wird die Anzeige eines Bilderordners eine runde Sache. Zusätzlich kann man die Vorschaubilder mit dem genialen timthumb Script dynamisch generieren lassen und so auch das angezeigte Format vereinheitlichen, was sehr nützlich ist, wenn sich im Ordner Bilder verschiedener Dimensionen oder Ausrichtungen befinden.

Hier nun ein paar Anwendungsbeispiele die oben genannter Scripte bedienen.

• Slideshow
• Slideviewer
• Vorschau mit Lightbox Vergrößerung

Bilder und Dateien aus Ordner auslesen und anzeigen

Bilder mit Vorschau und Dateien als Liste

Um die Ausgabe flexibler zu gestalten ist es natürlich zu empfehlen Bilder und anderen Dateien in verschiedenen Ordnern abzulegen. Wenn dies nicht geht, gibt es auch eine relativ einfache Form die Ausgabe von Bildern und Dateien zu trennen.

Code

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

foreach ($alledateien as $datei) {
	$dateiinfo = pathinfo($ordner."/".$datei);
	$size = ceil(filesize($ordner."/".$datei)/1024);
	if ($datei != "." && $datei != "..") { 

			//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
	};
 };
?>

Die HTML Ausgabe erfolgt hier mit Hilfe von DIV Bereichen, das ist für die Variante flexibler, weil die Benutzung von Listen auf Grund der unterschiedlichen Styles nicht ohne Umstand möglich ist.

CSS Code

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

Noch ein wenig jQuery hinzugefügt um dynamisch alternierende Hintergrundfarben für die Dateien zu generieren.

jQuery Code

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

Und so sieht es aus!
Demo

Download

Enthalten sind alle hier gezeigten Beispiele sowie alle dafür notwendigen Dateien. Der Code ist kommentiert und sollte keine Fragen offen lassen. Wenn doch gilt wie immer: Bei Fragen fragen!
Download
725 mal runtergeladen

3 Kommentare

• 

  nova.faca

  Dezember 1st, 2010 on 01:07

  interesting and good organized site.
  thank you for the tutorial (-:
• 

  Artur

  Juli 18th, 2011 on 10:12

  Danke sehr hilfreich und ein super Ansatz.
• 

  Garmon

  Februar 7th, 2012 on 14:50

  Vielen Dank! Vor allem der Hinweis auf Trennung von php und Html Code..sehr nützlich.
  Garmon

1 Trackback or Pingback for this entry

• Referenzen in mundgerechten Portionen « Blog « Advitum Webdesign, Dezember 27th, 2010 on 15:48

  [...] Tutorial: Ordner auslesen mit PHP [...]

Related Posts

PHP Kontakt Formular mit UTF-8 als Email verschicken (jQuery powered)

Nach langer Sommerpause mal wieder was nützliches. Hier geht es jetzt darum ein Formular per PHP als Email zu verschicken..