Ajax ist eine tolle Erfindung – bis auf ein paar „Kleinigkeiten“. Z.B. ist nicht vorgesehen einen Dateiupload mittels Ajax zu realisieren. Da muss schon ein echtes Formular her.

Doch wenn dennoch eine Datei im Hintergrund hochgeladen werden soll – also ein „echter“ Ajax File upload realisiert werden soll – greift man in die kreative Trickkiste. Die üblichen Verdächtigen für solche Aufgaben sind DWR, jQuery, Dojo. DWR bringt in der Inkarnation 3.0 dann auch Support für Ajax Fileupload, inclusive einem Mapper. Also zurück zu den Basics – was tun, wenn ein XmlHttpRequest nicht da ist? Richtig! Unsichtbares iframe nehmen.Das ganze muss etwas getrickst werden, damit auch wirklich alles bei dem Ajax Dateiupload gut geht – auf das Timing kommts an. Am einfachsten ist das mit jQuery:

  1. An den submit Event des per Ajax abzuschickenden Formulars hängen und dort folgendes ausführen:
  2. Unsichtbares IFRAME erzeugen
  3. An das IFRAME einen load-handler hängen: dieser wird aufgerufen wenn das Formular (iframe) abgeschickt ist – dieser räumt das iframe wieder auf und benachrichtigt handler
  4. Das iframe als target von dem abzuschickenden Formular setzen

Das ganze im Quellcode mit jQuery und Ausgabe für die Firebug Firefox Konsole, um den Ajax Upload zu verfolgen:

console.log("jquery setup");
jQuery("#logoUploadForm").submit( function(data)
{
var submittingForm = jQuery( this );
var frameName = ("upload"+(new Date()).getTime());
var uploadFrame = jQuery("<iframe name=\""+frameName+"\" />");

console.log(„submitting form“);

uploadFrame.css(„display“, „none“);
uploadFrame.load(function(data){
//submit is complete here
jQuery(‚#logoProgress‘).text(‚Your file was uploaded successfully‘).show().fadeOut(5000);
setTimeout(function(){
console.log(„removing temp frame“);
uploadFrame.remove();},100);
});
jQuery(„body:first“).append(uploadFrame);

//setup complete
submittingForm.attr(„target“, frameName);

});

Behandelt werden muss der Upload dann mit den „üblichen“ Mitteln. PHP / Zend Framework, Java und Commons Fileupload / Spring Framework, oder was einem sonst in den Sinn kommt.