Ajax Datei-Upload mit jQuery
Eine geschickte und schnelle Methode um den Upload von Dateien in Formularen zu erledigen ist wie so oft Ajax. Ein nettes Plugin dafür gibt es auf http://valums.com/ajax-upload/, welches zudem auch Multiple Uploads unterstützt.
Das Plugin glänzt nicht nur durch seine einfache Handhabung, auch lässt sich damit das lästige Problem der Gestaltung von Uploadformularfeldern, also “input type=”file”..” in den Griff bekommen. Auf diese Felder greift das CSS oft nicht wie es sollte usw.
Auf was ihr allerdings achten solltet ist, dass die Dateien, die mit dem Plugin schon hochgeladen wurden, bevor der Submit abgesetzt, bzw. vor dem Abschicken des Formulars auf dem Server liegen, während die restlichen POST Daten eben erst auf Click eines Absenden Buttons an ein Skript weitergereicht werden. Kurz gesagt, wenn Upload mit Ajax und das Formular als Method Attribut GET/POST hat, muss man aufpassen. Das heißt es sollte überprüft werden ob die hochgeladenen Bilder auch tatsächlich genutzt werden und der User nicht nur einfach wild Dateien hochgeladen hat ohne Das Formular auszufüllen.
Screeshot der Demo:
Kurz zu den Bestandteilen des Codes:
- Der HTML Teil
1 2 3 | <!-- Anlegen eines einfachen Divs auf das später die Upload Funktion gelegt wird --> <div id="upload_button">Upload</div> |
- Der Javascript Teil (weitere js-Dateien werden nicht benötigt)
1 2 3 4 5 6 7 | <script src="ajaxupload.3.1.js" type="text/javascript"> <script type="text/javascript"> $(document).ready( function() { new AjaxUpload('upload_button', {action: 'upload.php'}); }); </script> |
Der Ajaxupload kann auch durch Callback-Funktionen und andere Parameter eingestellt werden. Der Code auf der englischen Website ist selbsterklärend. Fragen könnt ihr auch hier stellen.
- Nach abesenden der Daten an “upload.php” geht es an die serverseite Verarbeitung
1 2 3 4 5 6 7 8 9 10 11 | $uploaddir = '/var/www/uploads/'; $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); //move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { echo "success"; } else { // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request echo "error"; } |
Auf der Valums Website gibt es ebenfalls Beispiele für Ruby sowie Coldfusion.
Die Demo findet ihr hier
Peter on Oktober 5th, 2010
Es ist vielleicht etwas lange her aber was muss ich tun, damit ich eine Datei erst beim Klick auf einen “Absenden”-Button absende?
Mich stört das sofortige absenden ein wenig. ^^
backstein on März 15th, 2012
Wunderbare Sache mit dem Upload, leider verursacht das Ganze echte Probleme, wenn es in einem MODALEN JQuery UI Dialog eingebaut wird.
Gibt es dafür irgendwelche Lösungsansätze?
Saramis on April 23rd, 2012
Inwiefern verursacht das denn dann Probleme? Ich benutze Ajax upload ähnlich wie hier im Beispiel mit PHP und mit jquery UI Dialog – klappt wunderbar!!
Bruno on Mai 3rd, 2012
Hallo!
Irgendwie bekomme ich das nicht hin mit dem integrieren.
hat einer eine StepByStep Anleitung? er Läd zu 100% hoch und dann kommt, Failed…
maikusch on Mai 24th, 2012
Hallo, kann mir jemand sagen wie ich es hin bekomme den namen der hochgeladenen dateien dann auf der index.php anzuzeigen? so wie es in de demo ist mein ich.