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...
jQuery Form Wizard Web-Formulare können einfach sein, aber auch ganz schön komplex werden. Besonders eklig können diejenigen werden, die auf mehrere Seiten aufgeteilt we...
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 ...
Interaktive Landkarte mit HTML5 Woran es derzeit bei HTML5 mangelt sind coole Seiten, die wirklich bis ins letzte alle Möglichkeiten ausreizen. Wenn es eine solche Seite gibt, ist di...

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.