Artikel - Detailansicht

Icon Aktuelles Mehrfacher Fileupload - Die einfache Variante, Teil I

Um mit einem Formular mehrere Dateien auf den Server zu laden , kann man die verschiedensten Wege gehen. Die erste Möglichkeit ist sehr einfach zu implementieren und soll in diesem Artikel erklärt werden.

Benötig werden kann solch eine Möglichkeit beispielsweise beim Erstellen einer webbasierenden Dokumentenverwaltung.
Der User möchte sicher nicht immer jedes Dokument einzeln uploaden müssen. Durch ein Formular, mit dem er gleichzeitig mehrere Dateien auswählen und uploaden kann würde die ganze Applikation an Bedienbarkeit gewinnen.

Das Funktions-Prinzip in diesem Artikel ist recht einfach. Statt eines Fileinput-Elementes ( <input type="file"> ) integrieren wir einfach mehrere dieser Formular-Elemente in einem normalen HTML-Formular. Der User kann jetzt mehrere Dateien (jeweils eine Datei pro Input-Element) auswählen.
Dazu wird prinzipiell dieser HTML-Code benötigt:

<INPUT TYPE="FILE" NAME="file1">
<INPUT TYPE="FILE" NAME="file2">
<INPUT TYPE="FILE" NAME="file3">
<INPUT TYPE="FILE" NAME="file4">

usw...

Dabei tauchen nun aber folgende Probleme auf:
Wir wissen beim Erstellen des Formulares nicht wieviel Dateien der User uploaden will.
Erstellen wir beispielsweise ein Formular, in dem der User maximal 5 Dateien uploaden kann, kann er auch nur maximal 5 Dateien uploaden auch wenn er jetzt 6 Dateien uploaden will.
Erweitern wir das Formular auf 10 Fileinput-Elemente, kann er demzufolge nur max. 10 Dateien auswählen. Dazu kommt, dass bei 10 Fileinput-Elementen das Formular sehr lang und unübersichtlich wird. Will der User jetzt aber nur eine Datei auswählen, sieht er 10 Inputfelder und könnte irritiert werden (und wer schon länger im Geschäft ist weis, dass dieser DAU-Fall auch eintreten wird :-)).

Deshalb wird in unserem Beispiel die Anzahl der File-Inputs anhand der FORM-Variable FORM.fcount dynamisch erzeugt.

<cfloop index="idx" from="1" to="#FORM.fcount#">
  <INPUT TYPE="FILE" NAME="file#idx#"><br>
</cfloop>

Damit jedes FileInput-Element eindeutig ist generieren wir mit dem laufenden Schleifenindex einen dynamischen Namen für jedes Fileinput-Element.

Beim ersten Aufruf des Formulares wird eine vorgegebene Anzahl von File-Inputs erzeugt, die der User aber nach seinen Bedürfnissen ändern kann.
Diese Vorgabe machen wir durch:

<cfset FORM.fcount="3">

In diesem Beispiel verwenden wir 3 Fileinputs als Defaultwert, im allgemeinen wird man dann aber wohl 1 nehmen. Diesen Wert speichern wir dazu noch in einem Hidden-Element, damit wir bei einem Submit überprüfen können, ob der User nur die Anzahl der Fileinputs geändert hat oder das Formular übertragen wollte.
Ändert der User die voreingestellte Anzahl durch Auswahl der Anzahl der benötigten Felder mit der Selectbox ruft sich das Formular nocheinmal selbst auf. Das erledigt die Javascriptfunktion submit(), die im onChange-Event der Selectbox aufgerufen wird:

<select name="fcount" onchange="document.f.submit()">

Nach dem Submit prüfen wir wieder auf der Serverseite, ob der User die Selectbox bedient hat oder nicht:

<cfif FORM.oldfcount eq FORM.fcount>

Sind diese Werte nicht gleich, hat der User nur den Wert der Selectbox geändert und will eine neue Anzahl Fileinputs haben. Deshalb findet kein Fileupload statt und wir zeigen das Formular nochmal an.
Damit die bereits eingegebenen Werte in dem restlichen Formular nicht verloren gehen setzen wir die übermittelten FORM-Variablen wieder als Value-Attribute in den Formelementen:

<input type="Text" name="email" value="#HTMLEditFormat(FORM.email)#">

Allerdings gehen die bereits ausgewählten Dateien beim Neuaufruf des Formulars verloren, da aus Sicherheitsgründen bei einem Fileinput-Element kein Value-Attribut gesetzt werden kann.
Diese Code funktioniert deshalb nicht:

<INPUT TYPE="FILE" NAME="file1" value="c:\datei.txt">

Jetzt hätten wir den 'komplizierten' Teil abgehandelt. Kommen wir im 2.Teil jetzt zum Fileupload selbst.

Steffen Goldfuss Steffen@goldfuss.de - 15.12.2000

Zurück


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen