Wählen Sie eine Datei…

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">

This entry was posted in HTML. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *