PHP Bildergalerie - Thumbnails
Autor
Flitze
Klicks 161665
Keywords:
PHP Bildergalerie Tutorial, PHP Bildergalerie erstellen, PHP MySQL Bildergalerie, PHP Thumbnails erstellen, PHP Bilder speichern, Tutorial PHP Bildergalerie, PHP Thumbnails, PHP Thumbnails erstellen, Uploadprüfung
Klicks 161665
Rating für PHP Bildergalerie
7.6 von 10
Bewertungen118
Stand
08.10.2014
7.6 von 10
Bewertungen118
Keywords:
PHP Bildergalerie Tutorial, PHP Bildergalerie erstellen, PHP MySQL Bildergalerie, PHP Thumbnails erstellen, PHP Bilder speichern, Tutorial PHP Bildergalerie, PHP Thumbnails, PHP Thumbnails erstellen, Uploadprüfung
Breadcrumb:
Workshops » PHP Bildergalerie » PHP Bildergalerie - Thumbnails
Uploadprüfung und Thumbnail-Erstellung für Einzelbilder
[ADSENSE_LINE]Also erstmal überlegen, wie das ganze von Statten gehen soll. Wir brauchen ein Formular, das den Dateiupload ermöglicht. Dieser Upload muss dann noch auf seine Gültigkeit überprüft werden, also ob der MIME-Type, die Dateiendung, die Dateigröße, etc… stimmen. Um unserer Struktur treu zu bleiben, legen wir erstmal den Ordner „foto_upload“ an. Darin erstellen wir vorerst 2 Dateien, eine index.php und eine add.php. In die index.php schreiben wir folgendes:PHP:
<?php
error_reporting(E_ALL);
echo "<h1>Foto Upload</h1>\n";
switch(isset($_GET['action'])?$_GET['action']:''){
case 'add':
include 'foto_upload/add.php';
echo "» <a href=\"index.php?s=foto_upload\">Zurück zum Foto Upload-Menu</a>\n";
break;
case 'add_multiple':
include 'foto_upload/add_multiple.php';
echo "» <a href=\"index.php?s=foto_upload\">Zurück zum Foto Upload-Menu</a>\n";
break;
case 'add_zip':
include 'foto_upload/add_zip.php';
echo "» <a href=\"index.php?s=foto_upload\">Zurück zum Foto Upload-Menu</a>\n";
break;
default:
$actions = array('add' => 'Ein Foto hochladen',
'add_multiple' => 'Mehrere Fotos hochladen',
'add_zip' => 'Zip-Archiv hochladen');
echo "<ul>\n";
foreach($actions as $action => $name)
echo "<li><a href=\"index.php?s=foto_upload&action=".$action."\">".$name."</a></li>\n";
echo "</ul>\n";
break;
}
?>
Erklären muss ich hier wohl nix, weil der Aufbau der Gleiche ist, wie bei der index.php im Ordner „alben“.
In der add.php erstelle ich jetzt das Formular für den Dateiupload.
PHP:
<?php
$sql = "SELECT
ID,
Name
FROM
Alben
";
$result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
if(!mysql_num_rows($result)){
echo "<p>\n".
"Es existieren keine Alben, in denen Sie Fotos speichern können.\n";
"</p>\n";
}
else{
echo "<form ".
"action=\"index.php?s=foto_upload&action=add\" ".
"method=\"post\" ".
"enctype=\"multipart/form-data\" ".
"accept-charset=\"ISO-8859-1\">";
echo "<div>\n";
echo "<label for=\"Album\">Album</label>\n";
echo "<select name=\"Alben_ID\" id=\"Album\">\n";
echo " <option value=\"0\">Bitte ein Album wählen</option>\n";
while($row = mysql_fetch_assoc($result)){
echo "<option value=\"".$row['ID']."\">\n".
htmlentities($row['Name'], ENT_QUOTES)."\n".
"</option>\n";
}
echo "</select>\n";
echo "<br />\n";
echo "<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"".FILE_SIZE."\" />\n";
echo "<label for=\"Foto\">Foto</label>\n";
echo "<input id=\"Foto\" name=\"Foto\" type=\"file\" />\n";
echo "<br />\n";
echo "<label for=\"Beschreibung\">Beschreibung</label>\n";
echo "<input id=\"Beschreibung\" name=\"Beschreibung\" type=\"text\" maxlength=\"255\" />\n";
echo "<br />\n";
echo "<input type=\"submit\" name=\"submit\" value=\"Upload\" />\n";
echo "</div></form>\n";
}
?>
Zuerst wird geprüft, ob bereits Alben angeleget wurden, denn wo kein Album ist, da kann auch kein Foto gespeichert werden. Wichtig ist das Attribut "enctype=\"multipart/form-data\", denn dadurch wird das Formular 'fähig' Dateien zu übertragen. Das hidden-Feld MAX_FILE_SIZE enthält als Value die Konstante FILE_SIZE, die die maximale Dateigröße angibt und deren Wert in der config.php notiert ist. Mit
PHP:
<?php
echo "<input id=\"Foto\" name=\"Foto\" type=\"file\" />\n";
?>
wird ein typisches Upload-Feld (mit dem 'Durchsuchen'-Button) erzeugt. Durch einen Klick auf 'Upload' wird das Formular inklusive der Datei abgeschickt. Dabei wird neben dem $_POST-Array auch noch das Array $_FILES erzeugt. Wenn man dieses mit var_dump() ausgeben lässt, erhält man folgende Ausgabe:
Code:
array(1) {
["Foto"]=>
array(5) {
["name"]=>
string(0) ""
["type"]=>
string(0) ""
["tmp_name"]=>
string(0) ""
["error"]=>
int(4)
["size"]=>
int(0)
}
}
Foto ist der Name, den ich vorher dem input-Feld für den Datei-Upload gegeben habe. Wir haben also das Array $_FILES, welches wiederum ein Array enthält, $_FILES['Foto']. Dieses enthält wiederum 5 Elemente, die folgendes bedeuten:
name – Name der Datei, die zum Upload ausgewählt wurde
type – MIME-Type der Datei (z.B. image/gif)
tmp_name – Name der temporären Datei, die auf dem Server zwischengespeichert wird
error – Nummer eines Upload-Fehlers (1-4), 0 bedeutet fehlerfrei
size – Dateigröße in Byte
Die obige Ausgabe ergibt sich übrigens, wenn man keine Datei ausgewählt hat
Die Aufgabe unseres Skriptes besteht nun darin diese Daten zu kontrollieren und bei Gültigkeit die temporäre Datei in unserem Foto-Ordner zu speichern sowie ein Thumbnail und einen entsprechenden Datenbankeintrag zu erstellen. Dazu benutzen wir diesen Code:
PHP:
<?php
error_reporting(E_ALL);
echo "<p style=\"font-weight:bold;\">Bereich: <span style=\"font-weight:italic;\">Fotos hinzufügen</span></p>\n";
if(isset($_POST['submit']) AND $_POST['submit'] == "Upload") {
$errors = array();
$myFILE = $_FILES['Foto'];
$errors = checkUpload($myFILE, $_file_extensions, $_file_mime_types, FILE_SIZE, PIC_WIDTH, PIC_HEIGHT);
if(!isset($_POST['Alben_ID'], $_POST['Beschreibung']))
$errors[] = "Bitte benutzen Sie das Formular aus dem <a href=\"index.php?s=foto_upload\">Foto Upload</a>.";
else{
if($_POST['Alben_ID']=="0")
$errors[] = "Bitte wählen Sie ein Album aus, in das das Foto gespeichert werden soll.\n";
}
if(count($errors)){
echo "<p>\n".
"Das Foto konnte nicht gespeichert werden.<br />\n";
foreach($errors as $error)
echo $error."<br />\n";
echo "</p>\n";
}
else {
do {
$Name = renameFile($myFILE['name']);
} while(file_exists(PIC_FOLDER."PIC_".$Name));
if (move_uploaded_file($myFILE['tmp_name'], PIC_FOLDER."PIC_".$Name)) {
// Thumbnail erstellen
createThumbnail(PIC_FOLDER."PIC_".$Name, TN_FOLDER, "TN_".$Name, TN_HEIGHT, TN_QUALI);
$sql = "INSERT INTO
Fotos
SET
Alben_ID = '".$_POST['Alben_ID']."',
Name = '".mysql_real_escape_string(trim("PIC_".$Name))."',
Beschreibung = '".mysql_real_escape_string(trim($_POST['Beschreibung']))."',
Datum = NOW()
";
mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
echo "<p>\n".
"Das Foto wurde erfolgreich gespeichert.<br />\n".
"</p>\n";
}
else {
echo "<p>\n";
echo "Es trat ein Fehler auf, bitte versuche es später erneut.<br />\n";
echo "Zurück zum <a href=\"index.php?s=foto_upload \">Foto Upload</a>\n";
echo "</p>\n";
}
}
}
else{
// Formular anzeigen
// …
}
?>
Diesen Code erkläre ich wohl besser Schritt für Schritt, weil hier einige selbst definierte Funktionen auftreten. Als erstes wird das bekannte Fehler-Array $errors erzeugt. Danach werden die relevanten Werte in $_FILES in $myFILE gespeichert.
PHP:
<?php
$myFILE = $_FILES['Foto'];
?>
Die Funktion checkUpload wird aufgerufen. Sie hat, wie der Name vermuten lässt, die Aufgabe die hochgeladene Datei zu überprüfen. Folgende Parameter werden dabei übergeben
PHP:
<?php
checkUpload($myFILE, $_file_extensions, $_file_mime_types, FILE_SIZE, PIC_WIDTH, PIC_HEIGHT);
?>
Bis auf $myFILE stammen alle Werte aus der config.php. Die Funktion selbst sieht folgendermaßen aus:
PHP:
<?php
function checkUpload($myFILE, $file_extensions, $mime_types, $maxsize, $maxwidth=0, $maxheight=0)
{
$errors = array();
// Uploadfehler prüfen
switch ($myFILE['error']){
case 1: $errors[] = "Bitte wählen Sie eine Datei aus, die <b>kleiner als ".$maxsize/MB." MB</b> ist.";
break;
case 2: $errors[] = "Bitte wählen Sie eine Datei aus, die <b>kleiner als ".$maxsize/MB." MB</b> ist.";
break;
case 3: $errors[] = "Die Datei wurde nur teilweise hochgeladen.";
break;
case 4: $errors[] = "Es wurde keine Datei ausgewählt.";
return $errors;
break;
default : break;
}
// MIME-Type prüfen
if(!in_array(strtolower($myFILE['type']), $mime_types)){
$fehler = "Falscher MIME-Type (".$myFILE['type'].").<br />".
"Erlaubt Typen sind:<br />\n";
foreach($mime_types as $type)
$fehler .= " - ".$type."\n<br />";
$errors[] = $fehler;
}
// Dateiendung prüfen
if($myFILE['name']=='' OR !in_array(strtolower(getExtension($myFILE['name'])), $file_extensions)){
$fehler = "Falsche Dateiendung(".getExtension($myFILE['name']).").<br />".
"Erlaubt Endungen sind:<br />\n";
foreach($file_extensions as $extension)
$fehler .= " - ".$extension."\n<br />";
$errors[] = $fehler;
}
// Bildmaße prüfen
if(@getimagesize($myFILE['tmp_name'])){
$size = getimagesize($myFILE['tmp_name']);
if ($size[0] > $maxwidth OR $size[1] > $maxheight)
$errors[] = "Bild zu groß (".$size[0]."x".$size[1]." Pixel).<br />".
"Erlaubte Größe: ".$maxwidth."x".$maxheight." Pixel\n";
}
// Dateigröße prüfen
elseif($myFILE['size'] > $maxsize){
$errors[] = "Datei zu groß (".$myFILE['size']/MB." MB).<br />".
"Erlaubte Größe: ".$maxsize/MB." MB\n";
}
return $errors;
}
?>
Als erstes wird $myFILE['error'] überprüft, in dem die Fehlernummer des Uploads gespeichert werden. Bei Fehlernummer 4 können wir uns eine weitere Prüfung sparen, da keine Datei ausgewählt wurde, deshalb gleich return $errors.
Danach wird der MIME-Type validiert. Dazu benutze ich folgendes
PHP:
<?php
if(!in_array(strtolower($myFILE['type']), $mime_types))
?>
Das Array $mime_types wird der Funktion als Parameter übergeben und enthält die erlaubten MIME-Typen. Mit der Funktion in_array() vergleiche ich $myFILE['type'] mit den Werten des Arrays. Damit keine Differenzen aufgrund der groß/klein Schreibung auftreten, verwende ich zusätzlich noch die Funktion strtolower(), so dass der MIME-Type auf jeden Fall in Kleinbuchstaben überprüft wird. Bei nicht-Übereinstimmung wird eine entsprechende Fehlerausgabe erzeugt, die neben dem MIME-Type der Datei auch die erlaubten Typen mit ausgibt.
Als nächstes wird die Dateiendung geprüft, was im Prinzip genauso funktioniert wie die Prüfung der MIME-Typen.
Dann verwende ich getImageSize() um zu prüfen, ob es sich bei der hochgeladenen Datei um eine Bilddatei handelt. Ist das der Fall, werden deren Maße überprüft. Liegt keine Bilddatei vor, wird diese Überprüfung übersprungen, schließlich sollen später auch Zip-Files mit dieser Funktion geprüft werden. Deshalb sind die Parameter $maxwidth und $maxheight auch optional.
Zum Schluss wird noch die Dateigröße überprüft. Eigentlich müsste es sowieso einen Upload Fehler in $myFILE['error'] geben, wenn MAX_FILE_SIZE (das hidden-Feld im Formular) überschritten wird, aber darauf würde ich mich nur bedingt verlassen.
Der Rückgabewert der Funktion ist ein Array, das alle aufgetretenen Fehler sammelt.
Wir gehen man von einer gültigen Datei aus und gehen zum nächsten Schritt über. Das sollte dieser sein:
PHP:
<?php
do {
$Name = renameFile($myFILE['name']);
} while(file_exists(PIC_FOLDER."PIC_".$Name));
?>
Sinn dieses Konstruktes ist es, einen Dateinamen zu erzeugen, der noch nicht existiert, denn es soll ja kein Foto überschrieben werden. Für die Funktion renameFile brauchen wir noch zwei weitere kleine Funktionen, die letztendlich so aussehen:
PHP:
<?php
// gibt die Dateiendung einer Datei zurück
function getExtension ($filename)
{
if(strrpos($filename, '.'))
return substr($filename, strrpos($filename, '.')+1);
return false;
}
// erzeugt einen Zufallswert
function getRandomValue()
{
return substr(md5(rand(1, 9999)),0,8).substr(time(),-6);
}
// erzeugt einen neuen Dateinamen aus Zufallswert und
function renameFile ($filename)
{
return getRandomValue().".".getExtension($filename);
}
?>
Funktionsweise: Zufallswert ermitteln mit den Funktionen md5(), rand() und time(), Dateiendung der hochgeladenen Datei anhängen, neuen Dateinamen zurückgeben.
So, damit hätten wir eine gültige Datei mit einem gültigen Dateinamen, den es bisher noch nicht gibt. Dann verschieben wir die Datei mal aus ihrer temporären Existenz in unserer Foto-Ordner. Dazu benutzen wir die Funktion move_uploaded_file():
PHP:
<?php
if (move_uploaded_file($myFILE['tmp_name'], PIC_FOLDER."PIC_".$Name))
?>
Das ganze wird in ein if verpackt, weil beim verschieben Fehler auftreten können und im Fehlerfall kein Thumbnail erstellt und kein Datenbankeintrag gemacht werden kann.
Die Thumbnail-Erstellung erfolgt über die Funktion createThumbnail()
PHP:
<?php
createThumbnail(PIC_FOLDER."PIC_".$Name, TN_FOLDER, "TN_".$Name, TN_HEIGHT, TN_QUALI);
?>
Übergeben wird dabei das (gerade im Foto-Ordner gespeicherte) Originalbild, der Thumbnail-Ordner, der Name des Thumbnails sowie dessen neue Höhe und Ausgabequalität. Ich habe als Referenzgröße die Höhe und nicht die Breite ausgewählt, weil ich eine einheitliche Höhe angenehmer finde als eine einheitliche Breite
.Inhalt von createThumbnail():
PHP:
<?php
// erzeugt ein Thumbnail
function createThumbnail($pic, $thumbdir, $thumbname, $newheight, $quality)
{
$size = getImageSize($pic);
// Größe berechnen
// kein resize, wenn die aktuelle Bildhöhe weniger als die neue Bildhöhe beträgt
if($size[1] < $newheight){
$width = $size[0];
$height = $size[1];
}
// Bild nach Höhe anpassen
else{
$height = $newheight;
$width = $newheight*$size[0]/$size[1];
}
// Typ ermittelm
if($size[2]==1) {
// Originalbild laden
$original=ImageCreateFromGIF($pic);
// leeres Thumbnail erstellen
$thumbnail=ImageCreateTrueColor($width,$height);
// Originalbild in das Thumbnail mit angepasster Größe kopieren
ImageCopyResized($thumbnail,$original,0,0,0,0,$width,$height,$size[0],$size[1]);
// Bild im temporären Thumbnail Ordner speichern
ImageGIF($thumbnail,$thumbdir.$thumbname);
}
elseif($size[2]==2) {
$original=ImageCreateFromJPEG($pic);
$thumbnail=ImageCreateTrueColor($width,$height);
ImageCopyResized($thumbnail,$original,0,0,0,0,$width,$height,$size[0],$size[1]);
ImageJPEG($thumbnail, $thumbdir.$thumbname, $quality);
}
elseif($size[2]==3) {
$original=ImageCreateFromPNG($pic);
$thumbnail=ImageCreateTrueColor($width,$height);
ImageCopyResized($thumbnail,$original,0,0,0,0,$width,$height,$size[0],$size[1]);
ImagePNG($thumbnail, $thumbdir.$thumbname);
}
else
return false;
return true;
}
?>
Die Funktion macht folgendes:
- neue Bildgröße berechnen
- Originalbild mit einer der ImageCreateFrom&hellip
)-Funktionen 'virtuell kopieren'- neues leeres Bild mit ImageCreateTrueColor() in der Thumbnail-Größe erzeugen
- Original mit ImageCopyResized() verkleinert in das neue Bild einfügen
- neues Bild mit einer der Image&hellip
)-Funktionen speichernDanach wird nur noch der Datenbankeintrag für das Bild erstellt und fertig
Dabei ist zu beachten, dass das Originalfoto und dessen Thumbnail fast den gleichen Namen haben. Originalfotos beginnen immer mit PIC_ während Thumbnails immer mit TN_ beginnen. Dieser Umstand ist beim auslesen später wichtig.
Zurück zur vorigen Seite:
PHP Bildergalerie - Alben verwalten Weiter zur nächsten Seite:
PHP Bildergalerie - Foto Upload und Mehrfach Upload
Suchmaschinenoptimierung (SEO - Search Engine Optimization)
