Einfach mit PHP Ordner auslesen und Dateien und Bilder anzeigen – Tutorial

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.

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

Ü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

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

CSS Code

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

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

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

jQuery Code

Demo

Download

Enthalten sind alle hier gezeigten Beispiele sowie alle dafür notwendigen Dateien. Der Code ist kommentiert und sollte keine Fragen offenlassen.