Artikel abonnieren
Mit einem Dateieingabe-Element kann immer nur eine Datei ausgewählt und hochgeladen werden. Will man dem Benutzer die Möglichkeit geben mehrere Dateien auf einmal hochzuladen, kann man einfach mehrere Dateieingabe-Elemente erstellen. Das hat allerdings einen Nachteil: In den meisten Fällen sind entweder zu viele, oder zu wenige Dateielemente da. Mit etwas JavaScript kann man dieses Problem lösen: Der Benutzer entscheidet selbst, wie viele Dateien er hochladen möchte.
Eine Lösung wäre, dass man eine Schaltfläche erstellt, mittels derer der Benutzer weitere Eingabefelder hinzufügen kann. Neben den zusätzlichen Eingabefeldern erstellt man dann einfach noch jeweils eine Schaltfläche zum Entfernen des Eingabefeldes, falls der Benutzer es sich anders überlegt.
Eine andere Möglichkeit wäre, das der Benutzer nur ein Eingabefeld, und eine Liste von ausgewählten Dateien hat. Nachdem eine Datei ausgewählt wurde, wird kommt die Datei in die Liste, und das Eingabefeld ist wieder leer, für die nächste Datei. Eigentlich wird das Eingabefeld dabei durch ein neues ersetzt, und das alte unsichtbar gemacht. Für den Benutzer sieht es aber so aus, als würde er die ganze Zeit dasselbe Eingabeelement benutzen.
Weitere Eingabefelder hinzufügen
Mittels der JavaScript-Funktion document.createElement(element) können dynamisch neue Elemente erstellt werden, diese können dann mit Funktionen wie appendChild, insertBefore, o.Ä. an beliebiger Stelle eingefügt werden.
Um eine Schaltfläche zum Hinzufügen zusätzlicher Eingabefelder zu erstellen, braucht man zuerst ein Verweis-Element, oder irgendein anderes Element, mittels dem der Benutzer das neue Eingabefeld hinzufügt. Damit das funktioniert, weist man dem onlick-Attribut eine Funktion zu, die ein neues Eingabefeld erstellt und im Dokument einfügt. Diese Funktion könnte zum Beispiel so aussehen:
function hinzu(element) { var neu = document.createElement('div'); neu.innerHTML = '<input type="file" class="datei" name="datei[]" />'; element.parentNode.parentNode.appendChild(neu); }
Mittels parentNode greift man auf den Elternknoten des Elementes zu. Im Beispiel wird das neue div-Element welches das Eingabeelement enthält am Ende vom form-Element eingefügt.
<form> <div> <input type="file" class="datei" name="datei[]" /> <a href="#" class="hinzu" onclick="hinzu(this); return false;">Datei hinzufügen</a> </div> <!-- An dieser Stelle werden neue Eingabeelemente eingefügt, wenn auf den Verweis geklickt wird. Also z.B. so: --> <div> <input type="file" class="datei" name="datei[]" /> </div> <!-- Ende --> </form>
Der Benutzer soll die hinzugefügten Eingabeelemente aber auch wieder entfernen können, dazu fügt man zu jedem Element noch eine Schaltfläche zum Entfernen hinzu. Dieser weist man eine JavaScript-Funktion zu, die das Elternelement (und somit auch alle Elemente darin) löscht. Der komplette Quelltext könnte (aufs nötigste reduziert) so aussehen:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mehrere Dateien flexibel hochladen</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function hinzu(element) { var neu = document.createElement('div'); neu.innerHTML = '<input type="file" class="datei" name="datei[]" /> \ <a href="#" class="weg" onclick="loeschen(this); return false;">entfernen</a>'; element.parentNode.parentNode.appendChild(neu); } function loeschen(element) { element.parentNode.parentNode.removeChild(element.parentNode); } </script> </head> <body> <form> <div> <input type="file" class="datei" name="datei[]" /> <a href="#" class="hinzu" onclick="hinzu(this);">Datei hinzufügen</a> </div> </form> </body> </html>
Auf der Demo-Seite sieht man das Skript auch in Aktion.
Eingabefeld + Liste
Ein einzelnes Eingabefeld, und eine Liste ausgewählter Dateien zu erstellen ist schon etwas komplizierter. Zum Glück haben sich schon andere die Arbeit gemacht. Es gibt sowohl für mootools, als auch für jQuery entsprechende Erweiterungen.
Für jQuery
Für jQuery gibt es das jQuery Multiple File Upload Plugin. Es bietet zusätzlich noch die Möglichkeit die verwendbaren Dateitypen einzuschränken und eine maximale Anzahl von Dateien anzugeben.
Einbinden und Benutzen
Zuerst müssen jQuery und die Erweiterung im head-Bereich eingebunden werden. Außerdem gibt es noch drei weitere (optionale) Erweiterungen, mit denen die Multi File Upload Erweiterung zusammenarbeiten kann: MetaData, BlockUI, und Form. Ersteres ermöglicht es das Element direkt über das class-Attribut des input-Elements zu konfigurieren, mit BlockUI werden schönere Fehlermeldungen angezeigt, und Form ermöglicht das Absenden des Formulars mittels AJAX.
<!-- jQuery wird vorausgesetzt. --> <script src="jquery.js" type="text/javascript"></script> <!-- Die Erweiterung selbst. --> <script src="jquery.MultiFile.js" type="text/javascript"></script>
Anschließend muss nur noch das input-Element entsprechend angepasst werden:
<input type="file" accept="png|gif|jpg|xcf" class="multi" maxlength="3" name="bild" /> <!-- oder --> <input type="file" class="multi accept-png|gif|jpg|xcf max-3" name="bild" />
Die Klasse multi sorgt dafür, das die Erweiterung sich dem Element annimmt. Mittels maxlength/accept lassen sich noch die max. Anzahl Dateien bzw. die akzeptierten Dateitypen festlegen.
Alternativ ist es auch möglich das Element mittels einer JavaScript-Funktion umzuwandeln. Dabei können außerdem noch einige weitere Parameter angegeben werden.
$(function() { $('input.datei').MultiFile({ list: '#liste', max: 3, afterFileRemove : function (e, v, m) { alert("Datei entfernt!"); }, afterFileSelect : function (e, v, m) { alert("Datei hinzugefügt!"); }, STRING: { file: '<em title="Zum entfernen hier klicken" \ onclick="$(this).parent().prev().click()">$file</em>', remove: '<img src="entfernen.png" alt="X" \ style="height:24px; width:24px; \ vertical-align:middle;border:0;" />' } }); });
So lässt sich beispielsweise festlegen, in welchem Element die Liste der ausgewählten Dateien angezeigt wird und welche Texte für die Fehlermeldungen verwendet werden. Außerdem können Funktionen angegeben werden die beispielsweise beim Auswählen oder Entfernen einer Datei ausgeführt werden.
Ausführlichere Informationen und einige weitere Beispiele finden sich auf der Webseite der Erweiterung.
Webseite: jQuery Multiple File Upload Plugin
Demo
Mit mootools
Für mootools gibt es ebenfalls eine Erweiterung.
Einbinden und Benutzen
Um diese Erweiterung zu benutzen, müssen zuerst mootools und die Erweiterung selbst eingebunden werden.
<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script> <script src="Stickman.MultiUpload.js" type="text/javascript"></script>
Das input-Element braucht keine bestimmte Klasse.
<form id="formular"> <input type="file" name="datei" /> </form>
Nun muss nur noch ein MultiUpload-Objekt erstellt werden.
window.addEvent('domready', function() { new MultiUpload($('formular').datei, 3, '[]', true, true); });
Der erste Parameter ist das input-Element, die folgenden 4 Parameter sind optional:
- Maximale Anzahl von Dateien (Standard: 0/unlimitiert).
- Was an den Namen des Elements angehangen wird (Standard: _{id}).
- Pfad anzeigen? (Standard: nein).
- Leeres Element entfernen, bevor das Formular abgeschickt wird? (Standard: ja).
Die Liste der ausgewählten Dateien lässt sich mittels CSS umgestalten.
Auch für diese Erweiterung habe ich wieder eine Demo-Seite eingerichtet:
Loading ...
So ein Script, das suche ich schon länger. In Verbindung mit .htaccess sicherlich eine feine Sache.
Bis wie viel MB / GB kann man dabei gehen, gibt es da eine Grenze?
Kann man das ganze irgendwo fertig von dir laden?
Die max. Größe ist eigentlich nur durch PHP (ich gehe jetzt mal davon aus, das du PHP benutzt) beschränkt. Siehe auch Dateien hochladen mit PHP.
Die Beispiele darfst du gerne kopieren, wenn du magst. Vielleicht schreibe ich auch noch einen Artikel, wie man das ganze noch mit Fortschrittsbalken versehen kann, mit code-Beispiel/fertigem Code.
Das wäre fein, so mit Balken usw.
Natürlich nutze ich PHP, was auch sonst?