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

Catch404 – 404 mit jQuery Abfangen 404 sind eine sehr unschöne Sache, vor allem bei einer internen Verlinkung. Hier kann man aber zumindest durch Studieren der Log-Files merken, das etw...
Notifier für Benutzer-Nachrichten in jQuery Jede halbwegs vernünftige Community-Software oder Internet-Anwendung braucht ein Nachrichten-System, um demjenigen angemeldeten Benutzer, der gerade a...
HTML5 Canvas in einfach – KineticJS Ich bin immer wieder erstaunt darüber was mit dem Canvas-Element alles möglich ist, meistens bin ich auch erstaunt darüber welcher Aufwand dazu betrie...
Paper.js – Vektorgrafiken in Javascript mitt... Es tauchen in letzter Zeit immer mehr Frameworks auf, die auf die eine oder andere Art und Weise versuchen, dem Webentwickler das Leben mit dem HTML5 ...

3 Antworten auf „DropArea – Bildupload mit HTML5 und jQuery“

  1. 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.

  2. 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.