Viele Informationen und noch nichts verstanden?
Kein Problem, hier einmal im Detail.
Oft gibt es die Möglichkeit Profilbilder, Icons etc. mit einem HTML Formular auf einem Server bereitzustellen (z.B. Facebook). Das Formular wird abgeschickt und mit PHP auf die Datei (via $_FILE) zugegriffen. Diese wird wiederum gespeichert und alles ist fertig. Klasse? Es geht noch besser.
Viel schöner wäre es doch, das Bild direkt in einer Datenbank zu speichern und eine Preview zu erhalten. Dies funktioniert nur mit JavaScript in Kombination mit Ajax.
Bilder in eine Datenbank speichern? Genau! Bilder bestehen, wie alle Dateien auf dem Rechner, aus einer Folge von Bits (die aus 0 oder 1 bestehen). So kann man auch ein visuelles Bild in 0 und 1 konvertieren. Um dies aber nicht auf eine unendliche lange Zeile voller 0 und 1 zu vergrößern gibt es Base64. Dies ist auch eine sehr kryptische Art und Weise ein Bild zu speichern, ist aber um einiges kürzer als die Bit Variante. Zudem können <img> Elemente diesen Code direkt als Bild wiedergeben.
Um ein Bild direkt in Base64 zu wandeln, könnt ihr einmal dies mit folgendem Online-Tool ausprobieren: Base64
Beispiel: <img src=”data:image/gif;#CODEHIER#” alt>
(In diesem Beispiel würde natürlich, #CODEHIER# mit eurem individuellen .gif Bild Code ersetzt werden.)
Um nun beim Upload des Bildes direkt in Base64 zu kodieren, fügen wir folgenden Code ein.
Dieser selektiert automatisch mit jQuery alle input Felder die vom Typ “file” sind. Somit alle Bild Upload Felder. Sollte hierbei ein neues Bild ausgewählt werden, wird die Change-Funktion gefeuert. Die neue Instanz vom FileReader (reader) liest die Datei aus und konvertiert diese direkt in Base64. Am Ende wird ein Log in der Console erstellt.
Bei einem echten Projekt wird der Code nicht direkt ausgegeben, sondern mit Ajax an eine PHP Datei geschickt, die den Bade64 Code in die Datenbank einfügt!
Bitte beachtet, da dieser Vorgang komplett auf dem Client (JavaScript) abgearbeitet wird, muss natürlich der jeweilige Browser die API des FileReaders unterstützen. Mehr Infos dazu hier!
The post jQuery Bild-Upload in Base64 konvertieren appeared first on Webdesign Marketing Service.
