Clientseitige Vorschau mit Plupload

Plupload bietet seit Version 2 die Möglichkeit, eine Vorschau der ausgewählten Dateien bereits vor dem eigentlich Upload, also beispielsweise in der Warteschlange, anzuzeigen.

Leider ist nicht wirklich dokumentiert, welche Methoden man verwenden muss, damit die Magie stattfindet.
Das jQuery UI Queue Widget unterstützt allerdings glücklicherweise Vorschaubilder, wodurch es nicht allzu schwer ist den entsprechenden Abschnitt im Quelltext zu finden.

Ich habe das mal zusammengefasst:

<div id="container">
    <a id="pickfiles" href="javascript:;">[Select files]</a> 
    <div id="preview"></div>
</div>
var uploader = new plupload.Uploader({
	runtimes : 'html5,flash',
	browse_button : 'pickfiles',
	container: 'container',
	url: "upload.php",
	max_file_size : '10mb',
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"}
	],
	flash_swf_url : 'Moxie.swf'
});

uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(){
        
		var img = new mOxie.Image();

		img.onload = function() {
			this.embed($('#preview').get(0), {
				width: 100,
				height: 100,
				crop: true
			});
		};

		img.onembedded = function() {
			this.destroy();
		};

		img.onerror = function() {
			this.destroy();
		};

		img.load(this.getSource());        
        
    });
});

Entscheidend ist die Verwendung von m0xie.Image. Diese Klasse bietet die Methode
embed() an, welche einem die ganze Arbeit abnimmt. Denn damit das Ganze in allen Browsern funktioniert, muss schon einiger Aufwand betrieben werden. Diese Methode fügt automagisch eine Vorschau in den gewünschten Ziel-Container ein. In modernen Browsern ist das eine Canvas, in anderen ein Data-URI oder Flash.

Dem Konstruktor der Klasse Image muss eine Datenquelle, also die gerade hinzugefügte Bilddatei, übergeben werden. Hierfür bietet die Klasse File die Methode getSource() an.

Ein funktionierendes Beispiel gibts hier: http://jsfiddle.net/Ec3te/2/
Ich habe dazu auch was auf StackOverflow geschrieben: http://stackoverflow.com/questions/17339899/plupload-html5-preview-after-fileselect