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

jQuery Logger – Loggen / Debuggen in jQuery Loggen / Debuggen von JavaScript ist so eine Sache. Alert fällt komplett hinten raus, console.log geht nicht im Internet Explorer, und alles in allem ...
Font Dragr – Fonts für den Einsatz im Web einfach ... Der Font Dragr ist eine ziemlich coole Sache, man kann einen beliebigen Font einfach auf eine dafür vorgesehene Fläche mittels Drag&Drop ziehen, u...
Mit Repo.js GitHub-Repositories in die eigene Seit... GitHub ist eine echt feine Sache, ich habe trotz der recht interessanten Preisgestaltung erst vor kurzem auf einen Premium-Account gewechselt. Es mach...
Heatmap mit dem HTML5 Canvas Element Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine f...

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.