Es hat mich lange Zeit und Nerven gekostet: wie kann man mit JavaScript und AJAX (ich bevorzuge die XAJAX-Klassen) einen Dateiupload generieren, ohne das Formular absenden zu müssen. Jetzt habe ich es endlich geschafft…
Hier nun meine Lösung – umgesetzt in TYPO3 als Extension.
1. Eine JavaScript-Datei erstellen und im Header einbinden:
function GetDirectory(name) {
var image = ”;
if(document.getElementById(name).files) {
// Support: nsIDOMFile, nsIDOMFileList
image = document.getElementById(name).
files.item(0).getAsDataURL();
};
return image;
}
page.includeJS {
file951753 = pfad/upload.js
}
2. XAJAX wie im Handbuch / Manual einbinden.
3. Ein Formular erstellen und das Upload-Feld einbinden.
<div class=”csc-mailform-field mh-register-field”>
<label for=”upload”>Upload:</label>
<input type=”file” name=”pre_upload” id=”pre_upload” value=”" onChange=”xajaxuploadFile(GetDirectory(‘pre_upload’), this.value, ‘pre_upload’)” />
<input type=”hidden” name=”upload” id=”upload” value=”" />
<div id=”error_upload” class=”error”></div>
<div id=”preview_upload” class=”preview”></div>
</div>
4. PHP-Code in der eigenen Class erstellen.
function uploadFile($image, $name, $id) {
$objResponse = new tx_xajax_response();
$rid = str_replace(‘pre_’,”,$id);
if($this->saveFile($image, $name)) {
$objResponse->addAssign($rid, “value”, $name);
$objResponse->addAssign($id, “disabled”, ‘disabled’);
$objResponse->addAssign(“preview_”.$rid, “innerHTML”, ‘<img src=”‘.$image.’” style=”width:100px;” /><br />’.$name);
}
else {
$objResponse->addAssign(“preview_”.$rid, “innerHTML”, ‘File not uploaded’);
}
$objResponse->addAssign($id, “value”, ”);
return $objResponse->getXML();
}
function saveFile($image, $name) {
$data = t3lib_div::trimExplode(‘;’,$image);
$type = $data[0];
$img = str_replace(‘base64,’,”,$data[1]);
header(‘Content-Type: ‘.$type);
if(file_put_contents(‘fileadmin/’.$name, base64_decode($img))) {
return true;
}
else {
return false;
}
}
Damit rockt die Sache.
Was passiert hier?
Das ganz oben erstellte und eingebundene JavaScript lädt den Inhalt der Bilddatei als base64-codierten String zur Verfügung und übergibt diesen als Parameter an die AJAX-Funktion. Zusammen mit dem Namen der Datei (aus this.value) und der ID des Upload-Feldes kann die PHP-Funktion “uploadFile” weiter arbeiten.
Diese ruft sodann die Funktion “saveFile” auf. Hier wird aus dem base64 wieder eine neue Datei erstellt. Dazu muss erst der Type aus dem String entfernt und in eine Variable gespeichert werden, damit wir beim Content-Type diese dynamisch einsetzen können. Hernach speichern wir den Rest des Strings einfach in eine Datei mit dem übergebenen Namen.
Das Problem mit dem Internet Explorer liegt einzig und allein daran, dass der Internet Explorer die Funktion getAsDataURL() nicht unterstützt.
Gibt es mittlerweile eine Lösung zu dem Problem mit dem JS im IE ?
Weiteres zum Upload mit AJAX unter
http://www.heissmann.org/proggen/typo3/neues-upload-mit-ajax-javascript/
Ich habe ein kleines Problem mit dem IE 7 und Deinem Script. Irgendwie scheint er das Bild nicht hochzuladen, sprich die Variable $image kommt leer an. Im FF und allen anderen Browsern geht es wohl. Irgend eine Idee?
Tachchen,
ich habe auch schon festgestellt, dass das Skript beim IE noch nicht so ausgereift ist.
Ich bastle grade an einer Variante mit jquery. In den nächsten Tagen gebe ich hier einen Post dazu.
Noch ein kleiner Hinweis:
Sollte zwar selbstverständlich sein, aber bitte darauf achten, dass die IDs der Datei-Auswahlfelder eindeutig sind und nicht mit anderen Feldern kollidieren. :-/
Das Rockt!!!!
Beste idee ever. hab alles ausprobiert und war alles zu aufwendig. benutze xajax 0.5++ in joomla.
Danke für Deine Mühe
gruss roman
Das freut mich doch. Danke für das Lob.
Kannst du irgendwo die Lösung für joomla posten und darauf verlinken? Wäre für manche User hilfreich.
ja, mache ich umgehend!
hattest du probleme oder schwierigkeiten mit datenverlust beim bild wieder zusammensetzen?(rein informativ, hatte vorher nie base64 genutzt).
ne, gab nie Probleme bis jetzt.