Uploadbutton stylen

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 Designs 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....
});


Eintrag von Stephan Hochdörfer am 31.08.2010

Tags: Allgemein, Flash, Javascript, Web

Diese Webseite verwendet Cookies, um die Bedienfreundlichkeit zu erhöhen. Mit der Nutzung unserer Webseite wird das Einverständnis erklärt, dass wir Cookies verwenden. Weitere Informationen.