Uploadbutton stylen

Ab und an gibt es Projekte, bei denen man die Verlegenheit kommt einen Uploadbutton zu benötigen und diesen optisch an das vorhandene Design anzupassen zu müssen. Früher ging dies nur umständlich, mittlerweile existieren deutlich schönere einfachere Möglichkeiten.

Ein Ansatz stammt von den moxiecode Entwicklern, die Köpfe hinter TinyMCE, und nennt sich plupload. Das schöne an der plupload Bibliothek ist die Verwendung von unterschiedlichen Plugins die sich um den Dateiupload kümmern können. Es stehen dem Entwickler mit Flash, Sliverlight, Gears, HTML5 und HTML4 eine Reihe von Möglichkeiten zur Verfügung die je nach Projektanforderung aktiviert bzw. deaktiviert werden können.

Das Einbinden bzw. Aktivieren erfolgt dabei mit ein paar Zeilen Javascript-Konfiguration. Die einzelnen Optionen sind auf der Projektseite dokumentiert:

var uploader = new plupload.Uploader({runtimes: 'gears,html5,flash,silverlight,browserplus', browse_button: 'pickfiles', container: 'container', max_file_size: '10mb', url: 'upload.php', flash_swf_url: '/plupload/js/plupload.flash.swf', silverlight_xap_url: '/plupload/js/plupload.silverlight.xap',  filters: [{title: "Image files", extensions: "jpg,gif,png"}, {title: "Zip files", extensions: "zip"}], resize: {width: 320, height: 240, quality: 90}});
uploader.bind('QueueChanged', function(up) {up.start();});
uploader.bind('FileUploaded', function(up, file, response) {  // logik nach dem upload....});