Zum Inhalt der Seite


FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN: Free-Net Erlangen-Nürnberg-Fürth e.V.

FEN Startseite > ~xx502 > Forms > Lektion17

Web Formulare

Kapitel 17 - Datei-Upload-Button

Datei-Buttons erlauben dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit Formulardaten zu übertragen. Wenn ein CGI-Script die ankommenden Formulardaten auf dem Server-Rechner verarbeitet, ist es dadurch möglich, dem Anwender das Uploaden (Hochladen) von Dateien auf den Server-Rechner zu ermöglichen.

<form>
<input
type="file" name="Datei" />
</form>

Der WWW-Browser sollte ein Eingabefeld anzeigen, das die Eingabe einer Datei (in den meisten Fällen mit Pfadnamen) erlaubt. Rechts daneben sollte der Browser einen Button anzeigen, bei dessen Betätigen ein lokaler Dateiauswahl-Dialog am Bildschirm erscheint.


Anzeigegröße

Auch für dieses Formularelement kannst du weitere Eigenschaften einstellen. Zuerst kannst du, wie beim einzeiligen Textfeld beschrieben, die Anzeigegröße des Eingabefeldes bestimmen.

<form>
<input type="file" name="Datei"
size="30" />
</form>

Dateigröße

Du solltest durch eine Beschränkung der Dateigröße verhindert, dass ein Benutzer beliebig große Dateien übertragen kann. Die Eigenschaft maxlength enthält dabei die maximal Anzahl Bytes, die übertragen werden dürfen.

<form>
<input type="file" name="Datei"
maxlength="100000" />
</form>

Dateitypen

Wenn Du nur bestimmte Dateitypen zulassen möchtest, kannst Du mit der Angabe accept die erlaubten Dateitypen eingrenzen. Hinter dem Gleichheitszeichen kannst Du einen Mime-Typ angeben. Dabei ist auch das Wildcardzeichen "*" bei Unter-Typen erlaubt. Im folgenden Beispiel werden alle Textdateien akzeptiert. Dazu gehören reine Textdateien (*.txt), aber auch HTML-Dateien (*.html, *.htm).

<form>
<input type="file" name="Datei"
accept="text/*" />
</form>

Beispiele für Mime-Typs findest du bei Selfhtml.


Wichtig:
Im einleitenden <form>-Tag muß die Angabe enctype="multipart/form-data" notiert werden, wenn das Formular einen Dateibutton enthält!

Im nächsten Kapitel werden wir dann zum letzten Schritt der Formulardefinition kommen: Dem Absenden der Daten.


Zurück Verstecktes Feld Zum Inhaltsverzeichnis Inhalt Weiter Submit- /Reset-Button