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.
Verstecktes Feld Inhalt Submit- /Reset-Button