Bildupload, Funktion

Oft möchte man den Besuchern die Möglichkeit einräumen, auf die Webseiten eigene Bilder uploaden zu können. Beispiel: Kleinanzeigen, Kontaktanzeigen etc.

Generell werden Bilder in Verzeichnisse gespeichert und nur die Links zu den Bildern in der Datenbank. Die Datenbank wird dadurch nicht unnötig gross. Die Datenbank ist nur erforderlich, wenn mehrere Bilder hochgeladen werden können. Die Verwaltung der Bilder ist mit einer Datenbank am Einfachsten.

Das Script ist so gehalten, dass es gut vereinfacht oder ausgebaut werden kann.
Vereinfachen: nur ein einziges Bild hochladen.
Ausbauen: in mehrere verschiedene Verzeichnisse Bilder hochladen.

Eigentlich könnte das Formular so gestalten werden, dass mehrere Bilder gleichzeitig angegeben und hochgeladen werden könnten. Die Prüfungen würden jedoch komplizierter. Entscheidend ist jedoch, dass der lokale Pfad beim User nicht erneut in die Eingabefelder gesetzt werden könnte, da der Pfad aus Sicherheitsgründen nie zu ermitteln ist! So müssten also die Angaben nach jedem Abbruch nochmals durch den User eingegeben werden, was auch nicht benutzerfreundlich ist.

Das Script funktioniert nur, wenn auf dem Server die GD-Library (Version 2) installiert ist. Dies ist bei fast allen Hostingangeboten enthalten.

Für die Programmierung des dargestellten Bildupload benötigen wir eine Datei und eine Datenbanktabelle.

Als erstes erstellen wir, am Besten mit phpMyAdmin, in der MySQL-Datenbank unsere leere Tabelle.
Das Programm phpMyAdmin ist bei den meisten Providern bereits installiert und hilft uns, unsere Datenbank zu warten.

In phpMyAdmin öffnen wir die Seite SQL. Nun kopieren wir den Inhalt des gesamten untenstehenden Scripts in das Feld SQL und drücken OK. Dadurch erstellt phpMyAdmin die benötigte Tabelle.
Anschliessend sollte gleich geprüft werden, ob die Tabelle "bildup" auch erstellt wurde.

Code MySQL - Datenbank

Erklärungen zum Code

Zu den Zeilen:

1: Hier steht als Kommentar der Inhalt dieses Scriptes. Dieser könnte auch weggelassen werden.

3 - 11: Die Definition unserer Tabelle

8: Der Verfall ist nicht notwendig. Die Idee ist, man könnte das Script erweitern und die Bilder nach einer gewissen Zeit automatisch löschen.

9: Ein Timestamp ist in dieser Tabelle auch nicht erforderlich. Als Idee, man könnte anderweitig prüfen, wann die Eintragungen verändert wurden.

Nun erstellen wir mit einem Editor eine Datei "bildup.php" und fügen das folgende Script ein.
Das Script muss angepasst werden.

Das Verzeichnis "bildup" sollte auch gleich erstellt werden. Dieses Verzeichnis sollte im gleichen Verzeichnis stehen, in dem auch das Script abgelegt ist.
Das Verzeichnis "bildup" muss mit Schreibberechtigung versehen sein, Beispiel: CHMOD 775

Idee: mit der Verwendung einer Datenbank, könnten hier mehrere Verzeichnisse verwendet werden.

Code Bildupload

Erklärungen zum Code

Zu den Zeilen:

1 - 5: Wir haben hier den nicht vollständigen head-Teil. Dazu kann der Quelltext dieser Seite betrachtet werden.

10: Jetzt inkludieren wir den Zugang zu unserer Datenbank. Dieser sollte immer in einer eigenen Datei sein, um so bei einer Änderung der Zugangsdaten, diesen nur an einem Ort anpassen zu müssen.
Beispiel: inc.php

13: Der Pfad zum Verzeichnis, wo sich die upgeloadeten Bilder befinden. In der Regel muss dieser Eintrag nicht verändert werden.
Das Verzeichnis könnte auch Unterverzeichnise haben (z.B. pro Kleinanzeige bis zu 3 Bilder), die entsprechenden Untererzeichnisse würden hier angegeben.

15: Wenn wir mehrere Bilderuploades verwenden möchten (z.B. pro Kleinanzeige bis zu 3 Bilder), so müsste die entsprechende Definition aus der Datenbank hier erfolgen.

18 - 19: Es werden die zu erstellenden Bildgrössen festgelegt.

22 - 46: Hier löschen wir die allenfalls nicht mehr gebrauchten Bilder. Dieser Teil steht am Anfang des Scriptes, um danach automatisch die Seite erneut anzuzeigen, nun ohne das entsprechende Bild.

23 - 24: Die per Formular übergebenen Variablen werden übernommen. Zur Sicherheit verhindert "strip_tags" die Übergabe von Tags.

27 - 29: Das hochgeladene Bild steht mit seinem ursprünglichen Namen in der DB. Im Verzeichnis stehen die Bilder mit veränderten Namen (_norm und _small).
Wir wandeln den Dateinamen ($bild_bild) in die effektiv im Verzeichnis stehenden Namen.

32: Ist das Norm-Bild überhaupt vorhanden?

33 - 35: Wenn ja, wird das Bild gelöscht.
Diese ganze Konstruktion dient nur dazu, dass keine Fehlermeldung erfolgt, falls aus irgend einem Grund die Datei nicht vorhanden ist.

42 - 45: Wir löschen das Bild in der DB, in dem wir mit UPDATE die entsprechende Spalte leeren.
In unserem Beispiel ist die Zeile "selection" immer mit dem Wert 1 versehen.
Hier müsste bei einem Ausbau des Scriptes ein entsprechender Wert eingefügt werden.

49 - 180: Nun der eigentliche Bildupload.
Bevor man die eigentlichen Bilder hochladen lässt, sollte man diese sicherheitshalber auf einiges überprüfen.

50 - 52: Die übergebenen Variablen. Die Variable "verfall" benutzen wir in diesem Script nicht. Dies zeigt die Möglichkeit, wie damit ein automatisches Löschen realisiert werden könnte.

54 - 56: Als zweites extrahieren wir aus der hochzuladenden Datei den Namen, den Typ und die Grösse.

59 - 62: Sollte keine Datei angegeben worden sein und nur Knopf "hochladen" angeklickt worden sein, so erfolgt diese Fehlermeldung und der Upload wird abgebrochen.

63 - 67: Nun prüfen wir die Grösse der hochzuladenden Datei.
Man könnte auf diese Prüfung verzichten, denn die Ursprungsdatei wird am Ende gelöscht.
Diese Prüfung erfolgt erst, wenn die Datei ganz auf den Server geladen ist. Somit kann also die Uploadmenge damit nicht begrenzt werden!
Wir begrenzen damit nur den Rechenaufwand auf dem Server zur Grössenumwandlung.
Normalerweise begrenzen Provider das "upload_max_filesize" auf 2 MB. Dieser Wert kann nicht überschritten werden!
Zudem beschränken Provider die effektive Rechenzeit und den Arbeitsspeicher. Man muss diesen Wert also ausprobieren, denn das Script würde sonst mitten drin einfach abbrechen.

68 - 74: Viele User geben den Dateien Namen in Romanlänge. Der Dateinamen darf natürlich nicht länger sein, als das Feld in der DB Platz bietet.

75: Nun prüfen wir den MIME-Typ. Im Internet machen Fotos nur im Format *.jpg und *.png Sinn.
Ist die Prüfung negativ, so folgt gleich Zeile 169.

77: Ganz wichtig, die Dateinamen dürfen nur Buchstaben aus dem Englischen und keine Leerschläge enthalten!
Die Datei erhält allenfalls einen neuen Namen.
Man könnte das noch etwas umfangreicher prüfen.

79: Dateinamen nur in Kleinbuchstaben zu schreiben ist nie schlecht.
Die Datei erhält allenfalls einen neuen Namen.

81: Wir splitten den Bilddateinamen.

82: Wir versuchen im Verzeichnis eine Datei mit dem nun aktuellen Namen auf dem Server zu finden, in dem wir den Dateinamen splitten und nach dem grösseren Bild "_norm" suchen.
Wir gehen davon aus, dass von den Bildern immer die "_norm" und die "_small"-Version vorhanden ist.
Wären die Bilder bereis vorhanden, würden diese sonst einfach überschrieben.

84 - 89: Ist eine entsprechende Datei bereits vorhanden, so erfolgt die Fehlermeldung und wir gehen gleich zu Zeile 184.

92: Alle Prüfungen wurden erfolgreich abgeschlossen, so dass nun der Upload erfolgen kann.
Wir laden die Datei auf den Server. Das temporäre File wird in das gewünschte Verzeichnis verschoben.
Wichtig, das Zielverzeichnis muss innerhalb des Verzeichnis stehen wo sich dieses File befindet!

94 - 97: Sollte das gewünschte Zielverzeichnis sich nicht im Verzeichnis unterhalb des Verzeichnis befinden, wo dieses Script läuft, so muss das Verzeichnis zuerst in ein Verzeichnis unterhalb diese Scriptes hochgeladen werden und danach in das Zielverzeichnis kopiert werden. Der Ansatz dazu hier.

100 - 103: Auf dem Server wird die Bildgrösse und der Dateityp bestimmt.
Die Höhe und Breite erhalten wir in Pixel.
Als Typ wird für eine jpg_Datei eine 2 ausgegeben und für eine png-Datei eine 3.

105: Wenn wir für das grosse Bild eine Standardbreite von 200 Pixel vorgeben (Zeile 18), berechnen wir die daraus folgende Höhe.
Anstelle einer festen Breite, könnte auch eine feste Höhe bestimmt werden. Die Dreisatzberechnung müsste entsprechend umgestellt werden und in den folgenden Zeilen berücksichtigt werden.

106: Nun wird ein leeres Bild in der vorgegebenen Grösse vorbereitet.
Wie die mehrstufige Bildererstellung geht, ist nicht ganz einfach. Geben Sie die einzelnen Funktionsbezeichnungen in eine Suchmaschine ein, Sie finden die Antworten schnell und ausführlich.

108 - 109: Das Selbe für das kleine Bild, gleich wie in Zeile 105 - 106.

112 -114: Nun bereiten wir die Namen des kleinen und grossen Bildes vor.

117 - 124: Je nach Dateityp muss für die Bilderstellung eine andere Funktion verwendet werden.
Das Bild wird in der Uploadgrösse erstellt.

125: Das Bild wird in die richtige Grösse gewandelt.

127 - 134: Das Bild wird gespeichert.
Bei jpg-Bildern kann als dritter Parameter ein Wert zwischen 1 und 100 eingegeben werden, 100 für die beste Qualität, 1 für die schlechteste Qualität. Daraus ergibt sich eine unterschiedliche Dateigrösse.

136 - 154: Analog erfolgt das kleine Bild.

157: Nun löschen wir das ursprünglich hochgeladene Bild aus dem Verzeichnis, um damit auf der Festplatte Platz zu erhalten.
Unter Umständen könnte es sinnvoll sein dieses Bild zu behalten für eine anderweitige Verwendung, z.B. ausdrucken. Dabei müsse jedoch der Delete-Teil entsprechend angepasst werden.
Es könnten auch noch die EXIF-Daten aus dem Ursprungsbild verwendet werden.
Es ist vorteilhaft, diese Zeile zum Testen des Scriptes auszukommentieren, damit geprüft werden kann, ob das Bild in seiner Ursprungsgrösse überhaupt auf dem Server gespeichert wurde. Damit lässt sich eine allfällige Fehlersuche sehr vereinfachen.

160 - 163: Zu guter Letzt ändern wir die Eintragungen zum Bild in der Datenbank.

165 - 166: Als "Fehlermeldung" geben wir aus, dass kein Fehler vorhanden war.

177 - 179: Zur Sicherheit leeren wir die Variablen. Der Upload ist abgeschlossen.

182: Nun folgt die Seitenanzeige.

184 - 186: Aus der DB holen wir den entsprechenden Datensatz.

190: Zur Anzeige holen wir den ersten Bildnamen aus der DB.

191 - 197: Ist kein Bild vorhanden, so wird dieser Teil übersprungen, damit verhindern wir allfällige Fehlermeldungen, weil der Server kein Bild findet.

192 - 196: Durch die Funktionen wird der Bildname und die Bildgrösse ermittelt.

198 - 205: Das selbe für das zweite Bild.

206 - 213: Das selbe für das dritte Bild.
Man könnte diesen Teil natürlich mit einer Schlaufe und einer entsprechenden Funktion im Code verkürzen. Bei drei Bildern lohnt sich das aber noch kaum.

216 - 218: Nun ermitteln wir das erste leere Bild. Die Variable $bildnr wird einfach in jeder Zeile überschrieben.
Die Variable $titeltext könnte natürlich auch aus einer DB-Abfrage kommen.

223: Das Tag "center" sollte vermieden werden und durch CSS ersetzt werden, ist aber im Beispiel einfacher.

224: Hier geben wir die Fehlermeldung aus.

226 - 230: Um einen schnelleren Seitenaufbau zu ermöglichen, geben wir die Tabellenbreiten an.

231 - 264: Anzeige des ersten Bildes.

238: Dass "alt" und "title" auch aus einer DB eingefügt werden könnten, versteht sich.

248 - 252: Das Formular zum Löschen des Bildeintrages.

266 - 299: Nun das zweite Bild. Auch hier, das Ganze könnte in einer Schlaufe und einer entsprechenden Funktion im Code verkürzen.

340: Beim Upload könnte immer auch ein Verfalldatum mitgegeben werden. Dies wird hier nicht verwendet, könnte aber sinnvoll sein.

343: Wir prüfen, ob nicht alle möglichen Bilder bereits hochgeladen sind. Wenn ja, dann gehen wir gleich zu Zeile 366.

345: Wichtig ist, dass der "enctype" angegeben wird!

351: Beim "input type="file"" kann der Knopf nicht mit CSS beeinflusst werden!

371 - 374: Die auf der Seite selbst nicht angezeigte Quellenangabe, ist nicht nur die Bedingung zur freien Nutzung dieses Skriptes, sondern ermöglicht auch in Zukunft, allenfalls benötigte Hilfe zu erhalten.

Vielleicht hat Ihnen unser Skript ein paar Stunden Arbeit erspart?