Das Hochladen von Dateien ist für viele Web-Anwendungen ein wichtiger Bestandteil, es wird aber von den Browsern mehr schlecht als recht unterstützt. Das größte Problem ist die fehlende Rückmeldung zum Status, während gleichzeitig jede Aktion des Benutzers den Vorgang abbrechen lassen kann. Ein einfacher Fortschrittsbalken kann die Rückmeldung deutlich verbessern, aber dafür muss auf Server-Seite einiges getan werden, während das Problem mit den Abbrüchen durch Anwender-Aktionen trotzdem besteht.

Um die Situation zu verbessern, sollten Dateien im Hintergrund hochgeladen werden. Dadurch kann die Anwendung weiter genutzt werden.

Durch das jQuery-Plugin form wird der Wechsel vom klassischen Browser-basierten Hochladen zum Hochladen per Ajax im Hintergrund zu einem Kinderspiel. Wir nutzen hier diese Form:

<form id="uploadform">
    <input type="file" id="fileupload" name="fileupload" />
    <input type="submit" value="Hochladen!" />
</form>

Hier brauchen Sie nur einen Aufruf von ajaxForm:

$("#uploadform").ajaxForm();

Das Hochladen im Hintergrund ohne irgendeine Rückmeldung über den Erfolg ist natürlich nicht ausreichend, daher nutzen wir die Option success, um nach dem erfolgreichen Hochladen eine Meldung auszugeben:

$("#uploadform").ajaxForm({
    success: function() {
        alert("Hochladen abgeschlossen!");
    }
});

Die Methode ajaxForm bindet sich selbst an das Submit-Event der Form, wodurch auch der Button, mit dem die Form abgeschickt werden sollte, in die Ajax-Anfrage mit eingebunden werden kann. Wenn man ajaxSubmit nutzt, ist das nicht möglich. Die Methode ajaxSubmit ist hilfreich, wenn das Abschicken der Form an anderer Stelle vorgenommen wird, zum Beispiel durch das Validation-Plugin. Um Validierung und Ajax zusammenzuführen, sollte ajaxSubmit in der Option submitHandler genutzt werden:

$("#commentform").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit({
            success: function() {
                $(form).clearForm();
                alert("Vielen Dank für Ihren Kommentar!");
            }
        });
    }
});

Die Methode clearForm wird ebenfalls vom Form-Plugin bereitgestellt. Sie entfernt alle Werte aus der Form. Das erleichtert es dem Anwender, eine weitere Datei hochzuladen.