So erstellen Sie dynamisch Miniaturansichten

Im Screencast dieser Woche zeige ich Ihnen, wie Sie Dateien hochladen und PHP dann dynamisch eine Miniaturansicht erstellen lassen. Egal, ob Sie eine E-Commerce-Website oder nur eine einfache Galerie erstellen, diese Techniken werden sich durchaus als nützlich erweisen. Wenn Sie bereit sind für Ihren "spoonfed" Screencast der Woche, machen wir uns auf den Weg!

* Hinweis - Nach einigen zusätzlichen Überlegungen und einigen guten Vorschlägen wurden einige kleine Änderungen am Code vorgenommen. Keine Sorge, sehr wenig hat sich geändert. Nur ein paar Bereinigungen. Sie können die folgenden Änderungen überprüfen und / oder den Quellcode herunterladen.

Die einfache Konfigurationsdatei

Der erste Schritt ist das Erstellen einer einfachen Konfigurationsdatei, in der wir einige Variablen speichern können. Wenn Sie diese in einer eigenen Datei ablegen, können Sie leicht Änderungen an unserem Code vornehmen, ohne viele Zeilen bearbeiten zu müssen.

 $ final_width_of_image = 100; $ path_to_image_directory = 'images / fullsized /'; $ path_to_thumbs_directory = 'images / thumbs /';

$ final_width_of_image - Diese Variable speichert die Breite unserer Miniaturansicht.
$ path_to_image_directory - Dies speichert den Pfad zu unserem Bilderordner in voller Größe
$ path_to_thumbs_directory - Dies speichert den Pfad zu unserem vollständigen Miniaturverzeichnis

Speichern Sie diese Datei als 'config.php' und legen Sie sie im Stammverzeichnis Ihres Ordners ab.

Das HTML

Erstellen Sie als Nächstes eine neue Seite mit dem Namen "index.php" und fügen Sie Folgendes ein.

       Dynamische Thumbnails   Laden Sie eine Datei hoch, Mann!

Scrollen Sie zunächst ein wenig nach unten zum Body-Tag. Um die Dinge so einfach wie möglich zu halten, habe ich eine extrem einfache Form erstellt. Aber es wird die Arbeit gut machen.

Wenn Sie mit dem Eingabetyp "Datei-Upload" arbeiten, müssen Sie dem Form-Tag ein Attribut "enctype" hinzufügen.

   Anstatt auf einer anderen Seite zu posten, schreiben wir den Code einfach in unser Hauptdokument. Dazu setzen wir das Aktionsattribut dieser Seite gleich.
  action = " Scrollen Sie nun zurück zum PHP-Code oben. Wir benötigen zwei Dateien. Die erste ist die Konfigurationsdatei, die wir gerade erstellt haben. Die zweite ist "functions.php" - die wir in Kürze erstellen werden.
  Als Nächstes prüfen wir, ob die Seite erneut gepostet wurde. Wenn dies der Fall ist, prüfen wir, ob die vom Benutzer gewählte Datei entweder "jpg", "gif" oder "png" war. Wir können dies tun, indem Sie den Dateinamen anhand eines regulären Ausdrucks prüfen.
  if (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['name']))
  Um mehr über reguläre Ausdrücke zu erfahren, schauen Sie sich diesen Screencast an.
  Wir entwickeln ein paar Variablen.
   $ Dateiname - Speichert den Namen der Datei, die der Benutzer zum Hochladen ausgewählt hat.
  $ source - Wenn Sie auf die Schaltfläche "Senden" klicken, wird die Datei in einem temporären Verzeichnis gespeichert. Diese Variable speichert diesen Pfad.
  $ target - Dadurch wird der Pfad gespeichert, unter dem das hochgeladene Bild gespeichert werden soll.
 
 Speichern der Datei
  Der letzte Schritt besteht darin, die Datei aus dem temporären Verzeichnis in unseren Ordner "images / fullsized" zu verschieben. Wir können dies tun, indem wir die Funktion "move_uploaded_file ()". Wir übergeben zwei Parameter. Der erste muss den Pfad zum temporären Ordner kennen. Der zweite muss wissen, wo die Datei gespeichert werden soll. ($ source bzw. $ target)
  move_uploaded_file ($ source, $ target);
 Miniaturansicht erstellen
  Anstatt den gesamten Code in unserer index.php-Seite zu speichern, erstellen wir eine weitere Seite mit dem Namen "functions.php". Erstellen und öffnen Sie diese neue Datei und schreiben Sie eine neue Funktion namens "createThumbnail ()".
  function createThumbnail ($ filename) erfordert 'config.php'; if (preg_match ('/ [.] (jpg) $ /', $ dateiname)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (gif) $ /', $ dateiname)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (png) $ /', $ dateiname)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filename);  $ ox = imagesx ($ im); $ oy = Imagesy ($ im); $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox)); $ nm = Imagecreatetruecolor ($ nx, $ ny); Bildkopien ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ ooy); if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("Es gab ein Problem. Bitte versuchen Sie es erneut!");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ dateiname); $ tn = ''; $ tn. = '
Herzliche Glückwünsche. Ihre Datei wurde erfolgreich hochgeladen und eine Miniaturansicht wurde erstellt. '; echo $ tn; 
  Wir beginnen damit, dass Sie erneut die Datei "config.php" benötigen. Als Nächstes prüfen wir, ob der Benutzer "jpg", "gif" oder "png" ausgewählt hat. Wir müssen dies tun, da PHP je nach Datei eine andere Funktion benötigt: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Danach müssen wir die Breiten- und Höhenwerte des Bildes speichern, das der Benutzer zum Hochladen ausgewählt hat. Wir können dies tun, indem wir "imagesx" bzw. "imagesy" aufrufen.
  $ ox = imagesx ($ im); $ oy = Imagesy ($ im);
  Als Nächstes erstellen wir zwei weitere Variablen, in denen die Breiten- und Höhenwerte für die in Kürze erstellte Miniaturansicht gespeichert werden.
   $ nx - ist gleich dem Wert aus unserer Konfigurationsdatei: 100
  $ ny. Wir müssen einige einfache Berechnungen durchführen, um die Korrekturproportionalhöhe zu ermitteln.
 
  $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox));
 ImageCreateTrueColor
     In unserem Fall übergeben wir die soeben erstellten Variablen "$ nx" und "$ ny".
 Größe der Bildkopie
     Bildkopien ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ ooy);
 Speichern der Miniaturansicht
  Die letzten Schritte erfordern, dass wir prüfen, ob ein Ordner mit den Miniaturansichten vorhanden ist. Wenn dies nicht der Fall ist, erstellen wir es mit "mkdir". Dann geben wir unser neues Bild in den Miniaturordner aus.
  if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("Es gab ein Problem. Bitte versuchen Sie es erneut!"); 
     Schließlich müssen wir das Miniaturbild auschecken, um dem Benutzer anzuzeigen, dass sein Bild erfolgreich hochgeladen wurde.
  $ tn = ''; $ tn. = '
Herzliche Glückwünsche. Ihre Datei wurde erfolgreich hochgeladen und eine Miniaturansicht wurde erstellt. '; echo $ tn;
 Fertig
  Gut gemacht! Dieser Screencast wurde aus zeitlichen Gründen etwas voreilig gemacht. Möglicherweise möchten Sie den Code ein wenig bereinigen und die Fehlerbehandlung verbessern.
  Wenn Sie weiter vorgehen möchten, können Sie herausfinden, wie Sie die Bilder auch beschneiden können! Wie immer bin ich mehr als offen für Verfeinerungen und Vorschläge!
  Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.
 
  
 



		
			
	   
	




Code