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

?>

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

<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") {

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

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

<img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a>

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

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.

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 != ".."  && $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
	};
 };
?>

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

{

<img src="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>" width="140" alt="Vorschau" /></a>

</div>

<?php

// wenn keine Bildeindung dann normale Liste für Dateien ausgeben

} else { ?>

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

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>

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

Hinweis in eigener Sache!
Das Script ist meine persönliche Lösung, ich erhebe keinen Anspruch darauf, dass diese auch die Beste ist. Änderungen, Verbesserungen und Optimierungen am Script sind ausdrücklich erlaubt. Die Benutzung des Scriptes erfolgt auf eigene Gefahr. Für eventuelle Schäden, die durch den Einsatz bzw. die Nutzung des Scriptes entstehen, übernehme ich keine Haftung.

23. Oktober 2012 Kategorie: Demos & Tutorials 1

19 Kommentare zu “Tutorial: Einfach mit PHP Ordner auslesen und Dateien und Bilder anzeigen.”

nova.faca sagt:

1. Dezember 2010 um 01:07

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

Antworten
Referenzen in mundgerechten Portionen « Blog « Advitum Webdesign sagt:

27. Dezember 2010 um 15:48

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

Antworten
Artur sagt:

18. Juli 2011 um 10:12

Danke sehr hilfreich und ein super Ansatz.

Antworten
Garmon sagt:

7. Februar 2012 um 14:50

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

Antworten
Remmidami sagt:

2. April 2012 um 20:45

Sehr, sehr nützlich!

Antworten
Steppenwolf sagt:

4. April 2012 um 13:00

Goil erklärt, super Tutorial.
DANKE!!!

Antworten
Rene sagt:

5. Mai 2012 um 12:13

Hallo.

Vielen Dank für die Scripte.
Wenn ich in der Bildanzeige auch einen Ordner ausklammern möchte, z.B. Ordner “Thumb”, welchen Code müsste ich als if ($bild != einsetzen?

Vielen Dank.

Antworten
Ralf sagt:

23. Juni 2012 um 20:56

Hi,
wie muss ich es anstellen
damit er zb. in der Vorschau nach 4 Bildern einen Zeilenbruch macht? Bekomme es nicht hin
Jemand nen kurzen schnippsel für mich?
Muss ja eigentlich hierdran liegen nur wie muss ich das anpassen?

DANKE

Gruss
Ralf

Antworten
Ralf sagt:

23. Juni 2012 um 20:59

Im vorrigen post hat er den PHP Code nicht übermittelt deswegen so

Im Script images_lightbox.php
ist es an der Zeile 53-57 zu ändern…nur wie?

DANKE

Antworten
Jürgen sagt:

26. Juli 2012 um 18:42

Du bist spitze Meister!!

Antworten
Robert sagt:

9. August 2012 um 19:33

nice tutorial i really liked to read it !

Antworten
Frank sagt:

28. August 2012 um 10:45

Sehr hilfreiche Seite!

Danke Dir!

Antworten
Jörg sagt:

11. September 2012 um 19:45

Super Tutorial. Ich werde es in mein selbst entwickeltes CMS integrieren.

Antworten
Thomas sagt:

5. Oktober 2012 um 12:09

Ich habe keine großen PHP-Kenntnisse, deshalb bitte ich um schonende Behandlung Ich möchte Dateien wie oben beschrieben (bsp 2) aus einem Verzeichnis (www.domain.de/2010/uploads/ordner/)auslesen lassen. Den Pfad gebe ich mit “../2010/uploads/ordner” an. Die dort vorhandenen Dateien werden auch ausgelesen und korrekt angezeigt. Die Verlinkung/das Öffnen funktioniert aber leider nicht. Die Dateien werden unter http://www.domain.de/2010/2010/uploads/ordner/beispiel.datei aufgerufen und führen so zum Fehler. Da ja quasi der Ordner “2010″ doppelt ist. Wie kann ich das Problem lösen?

Vielen Dank für eure Hilfe

Antworten
sud sagt:

21. Oktober 2012 um 16:32

hallo

kann ich auch iwi den kompletten phat zum bild jedem bild mit ausgeben ist das möglich?

ansonsten super erklärt danke

Antworten
Ronny sagt:

29. Oktober 2012 um 07:55

Hallo super Script. Nur bei mir werden vor den Thumbs Punkte angezeigt. Wo kommen den diese her? Die stören in der Ansicht ein wenig.

Antworten
faehnspueppi sagt:

14. Dezember 2012 um 14:06

Hallo, danke für die Schnipsel, sehr hilfreich. Aber sag mal warum ist da immer ein Semikolon hinter der foreach-Schleife?

Antworten
Na_Ich :-) sagt:

22. April 2013 um 13:40

Eine gute Tat die du hier tust! Danke

Antworten
Amaster sagt:

7. Mai 2013 um 07:52

Gibt so eine “Vorschau” wie bei den Bildern auch für Videos(mp4,ogg,oder auch ein anderes format)?

Antworten