DropArea – Bildupload mit HTML5 und jQuery

Das Input-Feld vom Typ File ist ein ausgesprochener Störenfried! Keine Präsentation einer fertigen Website ohne Diskussion darüber, wieso der „Durchsuchen“-Button so aussieht, wie er aussieht! Mit ein bisschen Aufwand kann man aber dank jQuery und HTML5 den „normalen“ Upload umgehen. Und mit ein bisschen Aufwand meine ich übrigens nicht das monströse eBay-Feature für den Bildupload! ;)

Screenshot einer DropArea

Der Einsatz des Plugins ist ziemlich simpel:

<div class="droparea spot" data-width="460" data-height="345" 
data-type="jpg" data-crop="true" data-quality="60" 
data-folder="sample" data-something="stupid"></div>
<script>
$('.droparea').droparea({'post' : '/data/dev/droparea/upload.php'});
</script>

Mit dem Teil lassen sich wirklich feine Sachen anfangen, zumal das hoch geladene Bild dank jQuery sofort angezeigt wird. Der Autor hat das Tool im Firefox und in Chrome getestet, ich hab nochmal mit dem IE9 nachgeschaut: kein Problem! ;) Beim nächstem Dateiupload sollte man sich also überlegen, ob man den grauen „Durchsuchen“-Button noch ertragen kann!

Ähnliche Beiträge

CLEditor – WYSIWYG-Editor als jQuery-Plugin Normalerweise hat man heutzutage in so ziemlich jedem Webprojekt zwei Dinge: eine Javascript-Library (jQuery oder Mootools) und einen WYSIWYG-Editor u...
jQuery Terminal Emulator Ok, ich hör jetzt schon die Aufschreie: wer braucht so was!? Antwort: Jeder! :) Wovon sprechen wir hier überhaupt? Ein Terminal ist ein Kommandozeilen...
Blog für HTML5 Game Development HTML5 Game Development (Spielprogrammierung) ist das nächste große Ding, da führt gar kein Weg dran vorbei! Dummerweise kocht da grad jeder sein eigen...
Nivo – ultimativer Image Slider für jQuery Image Slider gibt es inzwischen wie Sand am Meer und irgendwie werden sie langsam langweilig! Letztendlich machen sie alle den gleichen Fade-Effekt un...

3 Kommentare

  • Beim IE9 braucht man sich über nichts wundern, es gibt sogar Seiten die laufen im 64bit-IE nicht sauber, im 32bit-IE gar nicht (und umgekehrt). Ich habs grad nochmal ohne Probleme hin bekommen.

  • Interessanter Beitrag, vielen Dank dafür.

    Ich habe mir die Demo-Seite gerade im IE 9 (9.0.8112.16421/9.0.1) angeschaut, aber leider läuft dort der Upload nicht (event.dataTransfer.files ist undefined). Sie schreiben aber, dass Sie es erfolgreich mit dem IE 9 testen konnten. Da frag ich mich doch: warum? :) Für Denkanstoße bin ich dankbar.

    Viele Grüße.

  • t3n-DevLinks: Kunstprojekt mit HTML5, DropArea – Bildupload mit jQuery, WriteMaps – visueller Sitemap-Editor » t3n News sagt:

    […] Guido Mühlwitz stellt das jQuery-Plugin DropArea vor. DropArea ersetzt den ansonsten üblichen Bildupload-Dialog. Bilder werden auf ein Rahmenraster gezogen und so direkt und ohne Umschweife hochgeladen. Dabei zeigt DropArea bereits hochgeladene Bilder direkt innerhalb des Grids an. Einziger Nachteil: Bei sehr vielen zu erwartenden Uploads pro Vorgang muss das Grid sehr groß angelegt werden. […]

Schreibe einen Kommentar