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

AutoSuggest mit jQuery Das Auto-Completing bzw. Ajax-Angetriebene Suchen werden ja im Internet immer beliebter, allerdings haben die Teile bei falscher Programmierung die An...
FireQuery – jQuery für Firebug Zugegebenermaßen ist jQuery ganz nett, auch die Art & Weise, wie es JavaScript anzeigt und bearbeitet ist ganz nett, aber sobald man ein Prototype...
HTML5 Games und Social Rankings Ich wollte das Wort "Schwanzvergleich" nicht schon direkt in der Überschrift verwenden, aber letztendlich läuft es bei allen Online-Spielen (wenn man ...
In Place Editing mit jQuery In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Fro...

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.