HTML - Formulare - Wählen Sie eine Datei...Es gibt viele Formularelemente, doch eines, welches wohl eher unbekannt ist, ist der "Wählen Sie eine Datei" oder "Durchsuchen" Button, mit welchem Sie auf ihrer Festplatte eine Datei auswählen können, welche dann z.B. upgeloadet wird.Das Prinzip ist ganz trocken und klar, sie wählen über eine HTML Festlegung ein Dokument auf ihrer lokalen Festplatte aus, und können dies dann mit Hilfe eines Skriptes auf den Server uploaden.
Das unbekannte HTML-Attribut lautet File, man muss lediglich als "Input-type" file definieren. Dies geschieht mit folgender Zeile:

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

Doch das war noch nicht alles. Die HTML-Definitionen bieten noch mehr. So kann mit dem Attribut maxlenght die maximale Größe der Datei in Bytes angegeben werden.
So sieht die Definition für den Tag jetzt wie folgt aus, wenn man dem User erlauben will, eine Datei mit maximal 50000 Bytes upzuloaden.

<input name="Datei" type="file" size="30" maxlength="50000">

Dennoch sollte man aus Kompatibilitätsgründen die Größe der Datei doch durch ein Skript ermitteln lassen.

Doch das wars immer noch nicht ganz!
Man kann auch festlegen, welche Datetypen verwendet werden können, bzw. welche accepted werden.Hierzu benötigt man die Mime-Typen. Doch kann man bei Übergruppen wie text/ das * Zeichen verwenden, welches alle Typen die zur Übergruppe text/ gehören zum Auswählen möglich macht.
Die Definition sähe dann endgültig aus:

<input name="Datei" type="file" size="30" maxlength="50000" accept="text/*">

Das wichtigste dann noch zum Schluss!
Damit auch alles klappt muss man die Definition des Form-Tags um einen Zusatz erweitern der normalerweise schon Standard ist.
Ein Formular Tag muss mit folgendem Zusatz erweitert werden:

enctype="multipart/form-data"

Der Formular Tag sähe dann wie folgt aus:

<form method="post" action="/script.cgi"
enctype="multipart/form-data">

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: