Bilder oder andere Dateien via Ajax zu übermitteln war mit XMLHttpRequest Level 1 bis dato eine äußert unschöne Angelegenheit – denn nur einfache Daten konnten gesendet werden. Um den Ajax-File-Upload trotzdem zu realisieren, verwendeten Webworker deshalb Iframe-Hacks in verschiedensten JavaScript-Plugins. XHR 2 bietet nun allerdings die Möglichkeit die Scripts der bisherigen Webseiten aufzuräumen und ganz nativ Dateien via Ajax an den Server zu senden.
FormData() macht es möglich
XHR 2 bietet mit dem FormData()-Interface nun die Möglichkeit Bilder oder andere Dokumente für den darauffolgenden Ajax-Call aufzubereiten. Nach dem Initialisieren in einer Variable, kann via append()-Methode jeder einzelne Parameter hinzugefügt werden. Ein einfaches Beispiel mit jQuery:
$(‘body’).on('change', '#fileUploader', function() {// Post-Daten vorbereiten
var data = new FormData();
data.append('file', this.files[0]);
data.append('foo', 1);// Ajax-Call
$.ajax({
url: ‘/fileupload.php’,
data: data,
type: ‘POST’
processData: false,
contentType: false,
success: function(evt) { // Bild anzeigen }
});});
Das File-Input mit der ID #fileUploader triggert bei jeder Änderung (und somit jedem Upload) die change-Funktion. Via FormData() und .append(key, value) werden die einzelnen Parameter für den Call vorbereitet. Mit this.file[0] gelangt man zur ersten hochgeladenen Datei dieses Inputs. Multi-File-Uploads via Ajax können somit ebenfalls problemlos durchgeführt werden.
Der $.ajax()-Methode von jQuery müssen folgende Konfigurationen hinterlegt werden: processData und contentType auf false.
Im PHP-Dokument fileupload.php kann nun ganz normal mit $_FILE[] auf die Dateien bzw. $_POST[] auf die anderen Parameter zugegriffen werden.
Browser-Support
Gute Nachricht: Moderne Browser (Firefox, Chrome, Opera, Safari) unterstüzen XHR2 und somit FormData() komplett. Der Internet Explorer leider erst ab Version 10. Wer an Backends oder anderen modernen Webseiten bastelt, die also nicht Browserübergreifend gleich funktionieren müssen, eine denkbare Lösung. Alternativ kann natürlich auch ein Fallback zu einem Java-Script Plugin mit Iframe Hack eingerichtet werden.