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
Letzte Kommentare