Artikel - Detailansicht

Icon Aktuelles Mehrfacher Fileupload - Die komplexe Variante, Teil I

Im Artikel Mehrfacher Fileupload - Die einfache Variante hatten wir uns ein relativ einfaches Script zum Upload mehrere Dateien auf einmal angesehen. In diesem Artikel möchte ich jetzt eine weitere Möglichkeit der Implementierung dieser Funktion zeigen, wobei ein gänzlich anderes Prinzip benutzt wird. Das Funktionsprinzip besteht darin, dass wir zuerst jede Datei einzeln mit Hilfe eines Popup-Fensters auf den Server in ein temporäres Verzeichnis laden und im Browser nur den Client- und Serverfilenamen in einer WDDX-Struktur (in Javascript) speichern. Das Formular selbst sendet am Ende nur das WDDX-Paket zum Server, der dann aus den Informationen aus dieser Struktur die Dateien in dem endgültigen Verzeichnis ablegt. Zum Verständnis des Artikels sind gute Kenntnisse in Javascript und WDDX und WDDX-Recordsets nötig.

Das Beispiel benötigt im aktuellen Verzeichnis die Unterverzeichnisse temp (dort werden die Dateien zwischengelagert) und filestore (dort werden die Dateien nach dem Submit des Formulars endgültig abgelegt und können von dort aus weiterverarbeitet werden). Die folgenden Dateien gehören zum Beispielprogramm:
main.cfm: Die Seite enthält das Hauptformular, indem die bereits upgeloadeten Dateien angezeigt werden. Der User kann hier auch weitere Felder füllen. select.cfm: Diese Datei wird im Popup-Fenster aufgerufen. Der User wählt hier die zu übertragende Datei von seinem lokalen System aus und überträgt sie so auf den Server ins Verzeichnis temp. upload.cfm: Diese Datei wird durch den Submit des Hauptformulares aufgerufen und restauriert die temporären Dateien. wddx.js: Das ist eine Javascript-Library von Allaire, die normalerweise im Verzeichnis \CFUSION\Scripts liegt. Die enthält alle WDDX-Recordsetfunktionen, die wir benötigen um im Browser mit dieser Struktur zu arbeiten.
Sehen wir uns die Funktion der Templates im einzelnen an. Dazu beginnen wir mit der select.cfm da diese von der Funktion her recht einfach aufgebaut ist.
Die select.cfm wird aus dem Hauptformular heraus in einem Popup-Fenster aufgerufen. Sie enthält ein einfaches Formular mit einem Fileinput-Element, das bei einem Aufruf mit GET angezeigt wird:

<form action="<cfoutput>#CGI.script_name#</cfoutput>" name="f" method="post" ENCTYPE="multipart/form-data">
   <input type="File" name="sFileName">
   <input type="Submit" name="Datei hinzufügen">
</form>

Der User kann hier durch das lokale Filesystems seines Rechners browsen und eine Datei zum Server übertragen.
Da dieses Formular das eigentliche Upload-Formular ist, darf hier im <form>-Tag das Attribut ENCTYPE="multipart/form-data" nicht vergessen werden! Nach dem Verschicken dieses Formulars wird der POST-Zweig des <cfif> zu Beginn der Seite abgearbeitet, da sich die Seite selbst aufruft:

<CFFILE ACTION="UPLOAD" FILEFIELD="FORM.sFileName" DESTINATION="#expandPath('temp')#" NAMECONFLICT="makeunique">

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<cfoutput>
top.opener.addFile("#File.ClientFile#","#File.ServerFile#","#File.FileSize#");
top.close();
</cfoutput>
</SCRIPT>


Zuerst wird dann mit <cffile> die Datei im Verzeichnis temp zwischengespeichert. Dabei wird der Dateiname von Coldfusion selbstständig festgelegt, da durch die Attributangabe NAMECONFLICT="makeunique" im <cffile>-Tag keine vorhandene Datei überschrieben wird. Nach dem serverseitigen Upload mit <cffile> (das Tag hat sozusagen den Rest erledigt) müssen wir jetzt noch die jetzt gewonnenen Daten (alter Dateiname, neuer Dateiname) an das Hauptformular übermitteln, damit sie dort gespeichert werden können. Dazu rufen mir mit:

top.opener.addFile("#File.ClientFile#","#File.ServerFile#","#File.FileSize#");

eine Javascript-Funktion auf, die in der Seite mit dem Hauptformular (main.cfm) liegt. Die Funktion heist in diesem Fall addFile(). Wir übergeben dieser Funktion die 2 Dateinamen und noch die Länge der Datei (nur um die Länge im Formular anzeigen zu können). In der Variable opener speichert der Browser die Referenz auf das Fenster, welches das aktuelle Popup geöffnet hat. Mit top.opener können wir somit eine Funktion aus main.cfm referenzieren. Danach wird mit:

top.close();

das Popup-Fenster geschlossen. Die Arbeit von select.cfm ist damit erledigt. Das Popup-Fenster kann jetzt beliebig oft aufgerufen werden und es läuft jedesmal der gleiche Vorgang ab. Die einzige Schnittstelle zwischen dem Hauptformular und dem Popup-Fenster wird duch die JS-Funktion addFile() gebildet.

Steffen Goldfuss steffen@goldfuss.de - 18.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