PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Pascal Landau

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt4
Heute251
Gestern331
Gesamt2311067

PHP Bildergalerie - Thumbnails

Autor Flitze
Klicks 159009
Rating für PHP Bildergalerie
  7.6 von 10
Bewertungen118
Stand 08.10.2014
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

Amazon: PHP 5.3 und MySQL 5.1
Breadcrumb:
Workshops » PHP Bildergalerie » PHP Bildergalerie - Thumbnails
Seite : 1 2 3 4 5 6 7 Bewerten
Article Wizard - deutscher Article Spinner

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 
"&raquo; <a href=\"index.php?s=foto_upload\">Zur&uuml;ck zum Foto Upload-Menu</a>\n";
                    break;

        case 
'add_multiple':
                    include 
'foto_upload/add_multiple.php';
                    echo 
"&raquo; <a href=\"index.php?s=foto_upload\">Zur&uuml;ck zum Foto Upload-Menu</a>\n";
                    break;

        case 
'add_zip':
                    include 
'foto_upload/add_zip.php';
                    echo 
"&raquo; <a href=\"index.php?s=foto_upload\">Zur&uuml;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&ouml;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&uuml;gen</span></p>\n";

    if(isset(
$_POST['submit']) AND $_POST['submit'] == "Upload") {
        
$errors = array();
        
$myFILE $_FILES['Foto'];
        
$errors checkUpload($myFILE$_file_extensions$_file_mime_typesFILE_SIZEPIC_WIDTHPIC_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_".$NameTN_FOLDER"TN_".$NameTN_HEIGHTTN_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&auml;ter erneut.<br />\n";
                echo 
"Zur&uuml;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_typesFILE_SIZEPIC_WIDTHPIC_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&auml;hlen Sie eine Datei aus, die <b>kleiner als ".$maxsize/MB." MB</b> ist.";
                    break;
            case 
2$errors[] = "Bitte w&auml;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&auml;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&szlig; (".$size[0]."x".$size[1]." Pixel).<br />".
                            
"Erlaubte Gr&ouml;&szlig;e: ".$maxwidth."x".$maxheight." Pixel\n";
        }
        
// Dateigröße prüfen
        
elseif($myFILE['size'] > $maxsize){
            
$errors[] = "Datei zu gro&szlig; (".$myFILE['size']/MB." MB).<br />".
                        
"Erlaubte Gr&ouml;&szlig;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($filenamestrrpos($filename'.')+1);
        return 
false;
    }

    
// erzeugt einen Zufallswert
    
function getRandomValue()
    {
        return 
substr(md5(rand(19999)),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_".$NameTN_FOLDER"TN_".$NameTN_HEIGHTTN_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 speichern

Danach 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

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (32)

8.4
8
7.2

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2024