jQuery File Uploader bauen
Kommentare

Will man einen File Upload auf der Website implementieren, bietet sich ein Ajax File Uploader an. Der Vorteil daran ist, dass man den User nicht auf eine gesonderte Upload Page umleiten oder die Seite neu laden muss. Den User auf der gleichen Seite mit dem Upload auszustatten ist in puncto Usability eindeutig die beste Variante.

Eine Möglichkeit so einen Ajax File Uploader zu erstellen, ist über das jQuery Upload File Plug-in. Damit lässt sich ein Upload-Interface einfach implementieren und anpassen ohne unnötige Ladezeit.

Wie, das zeigt Sara Vieira in einem How-to: Den Website-Instruktionen folgend, wird das Setup des Plug-ins durchgeführt: Wir brauchen jQuery, die JS-File und das CSS. Danach wird das HTML-Setup durchgeführt, wobei wir dank des Plug-ins eigentlich nur ein leeres div aufsetzen müssen – das Plug-in erledigt den Rest.

Beim JavaScript wird es etwas aufwendiger: Zuerst rufen wir die uploadFile-Funktion im leeren div auf. Dann sollte man sich überlegen, welche Funktionalität man dem Upload Form genau verleihen möchte. Im konkreten Beispiel will man zunächst das upload.php-Skript laufen lassen, also braucht man den URL-Parameter mit dem Link zur Datei. Für Multiple File Uploads muss multiple auf true gesetzt werden. Wenn man zusätzlich Bild-Upload haben will, müssen die Dateitypen angegeben werden. Vieira ändert darüber hianus noch die Error Messages.

Der Uploader ist jetzt bereits funktional. Weiter geht’s am CSS, um das Ganze noch etwas attraktiver zu gestalten. Folgend könnt ihr das Endergebnis betrachten.

jQuery File Uploader Demo

jQuery File Uploader Demo

Alle Schritte inklusive Codebeispielen findet ihr im Artikel „How to create a jQuery file uploader“ von Sara Vieira.

Aufmacherbild: Vector metal upload icon / button. von Shutterstock / Urheberrecht: E_K

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -