✔ jQuery/Ajax Bildupload mit Vorschau

A

aurus

Mitglied
Hallo zusammen :)

Es geht um ein größeres Formular, das der User absenden kann. Unter anderem kann er auch Bilder hochladen. Ich möchte nun das große Formular quasi in mehrere kleine aufsplitten. Dabei soll, sobald vom Rechner ein Bild ausgewählt wurde, ein Button zur Verfügung stehen mit dem man ein Vorschaubild anzeigen lassen kann. Auf der gleichen Seite. Das würde ich per Ajax/PHP realisieren können.

Das könnte der User dann mit mehreren Bestandteilen des Formulars machen. Ist er zufrieden mit allem, klickt er unten auf den richtigen Absenden-Button und der ganze Kram landet in der DB und die Bilder werden gespeichert.

Also entweder muss ich es schaffen, dass von den Bildern eine Vorschau erzeugt wird, obwohl sie nicht auf dem Server gespeichert sind oder ich muss sicherstellen, dass beim Schließen des Tabs bzw. des Browsers ein Skript aufgerufen wird, dass die Bilder löscht. Letzteres würde hiermit gehen. Oder?! Bin ich damit auf dem richtigen Dampfer?
Würde sich ersteres irgendwie realisieren lassen?
 
Bis vor wenigen Monaten hätte ich dir versichert, dass dies nicht Möglich ist. Die Gefolgschaft von HTML5 bringt dir aber eine File API, mit der du das Problem bestimmt lösen kannst.
 
Danke für den Tipp. Ist ja schon ganz schön krass, was man mit HTML 5 alles so wird machen können! Ist auf jeden Fall interessant. Fürs erste würde ich aber lieber auf konventionelle Mittel zurückgreifen.

Würde es so gehen?

1.User füllt ein Formular aus und klickt auf den Button daneben.
2. Per Ajax wird ein PHP-Skript aufgerufen. Dieses speichert das Bild auf dem Server und liefert der Seite ein Vorschaubild zurück, das angezeigt wird.
3. Der User klickt unten auf endgültig speichern. Dann werden die zugehörigen Daten in der DB abgelegt. Wenn der User das Formular abbricht oder vorzeitig verlässt, wird per Site-Unload ein Skript aufgerufen, das die zuvor gespeicherten Bilder wieder löscht.
 
Hm, ok. Habe gerade mal ein wenig Google bemüht (nicht, dass ich das ich das vorher nicht auch schon gemacht hätte ;)) und habe nun das gefunden. Habe es nur überflogen, aber das schaut ganz gut aus. Werde ich mir mal näher ansehen.

Habe zwar noch nicht so viel Erfahrung mit Ajax, aber ich denke das müsste ich hin bekommen^^
 
Ich werde mich da jetzt erstmal einlesen. Irgendwie scheint es ja so ähnlich wie ich das will zu funktionieren. Und das ist schon mal was.

Danke für die Tipps so weit :)
 
Genau über dieses Thema wollte ich mal ein Tutorial machen ;)

Jedenfalls habe ich den Text nie komplett geschrieben, den Code hingegen schon.
Anhang anzeigen img_preview.zip
Ein PHP-Skript wird hier gar nicht benötigt, der Inhalt der Bilddatei wird Base64 kodiert und dann einfach in ein <img>-Tag gepackt.

Falls du es auch per AJAX hochladen möchtest, hier ein bereits veröffentlichtes Tutorial:
File-Upload per JavaScript & HTML5 FileAPI.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück