Gerade wenn es um sogenannten user generated content geht, ist es immer schön, wenn man eine Vorschaufunktion anbieten kann. Ein Knopf “Vorschau” ist ziemlich 1990 – es lebe das Web 2.0 mit Ajax, jQuery und vielen Hacks.

Ich hatte bereits darüber gebloggt wie man mittels jQuery und etwas Tricksen einen “Ajax Fileupload” realisert. Noch schöner ist es natürlich, wenn der User sofort Feedback bekommt, wie sein ausgewähltes Bild wohl aussehen würde. Dazu lädt man das Bild schon direkt nachdem der User eine Datei ausgewählt hat, und zeigt diese an. An Browser-Caches muss man vielleicht noch denken, aber auch hier kann JavaScript bzw. jQuery helfen.

Das Vorgehen:

  1. Man hängt einen Listener an die Change Methode des Input Felds
  2. Wie in meinem letzten Beitrag beschrieben wird der Upload über ein Iframe realisiert
  3. Nun biegt man noch die Bild URL um und zeigt somit das Resultat an

Hier der Quellcode: (das Formular heißt “logoUploadForm”, das input Feld für das Image File “logo”.
Ajax Fileupload handling – und Bild URL umbiegen nach dem Upload.

//handle file upload with hidden iframe
jQuery("#logoUploadForm").submit( function(data)
{
var submittingForm = jQuery( this );
var frameName = ("upload"+(new Date()).getTime());
var uploadFrame = jQuery("<iframe name=\""+frameName+"\" />");
uploadFrame.css("display", "none");
uploadFrame.load(function(data){
//submit is complete here
setTimeout(function(){
//update image
var imageDiv = jQuery("#print_logoImage");
var logoUrl = imageDiv.attr("src").split("?")[0];
imageDiv.attr("src", logoUrl+"?"+ (new Date()).getTime());
//remove hidden upload frame
uploadFrame.remove();},1000);
});
jQuery("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});

Hier noch der Code zum “sofort upload”:

jQuery("input[name=logo]").change(function (){
jQuery("#logoUploadForm").submit();
});

Das wars – ausprobieren!

  1. Ajax File upload mit jQuery – ohne DWR
  2. jQuery: HTML Inhalt einfärben
  3. Internet Explorer (IE) 6 und das Bilder Caching
  4. SpringSource/Vmware: FAIL dank Google Analytics
  5. Firefox: “Call” objekt Fehler (FirePHP)
  6. GWT: Google Web Toolkit wird erwachsen