SELFHTML: HTML/XHTML / Formulare / Felder für Datei-Upload

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Felder für Datei-Upload
	Felder für Datei-Uploads definieren Weitere Informationen

Felder für Datei-Upload definieren

Diese Sorte Formularelement erlaubt dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit dem Formular 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.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Felder f&uuml;r Datei-Upload definieren</title>
</head>
<body>

<h1>Schicken Sie uns was Schickes!</h1>

<form action="input_file.htm" enctype="multipart/form-data">
  <p>W&auml;hlen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br>
    <input name="Datei" type="file" size="50" maxlength="100000" accept="text/*">
  </p>
</form>

</body>
</html>

Erläuterung:

Mit <input type="file"> definieren Sie ein Element für Datei-Upload (input = Eingabe, file = Datei). Der Web-Browser sollte dann 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 Anklicken ein lokaler Dateiauswahl-Dialog am Bildschirm erscheint. Die Größe des Eingabefeldes (Anzahl Zeichen) können Sie mit dem Attribut size bestimmen (size = Größe).

Wenn Sie das Attribut maxlength angeben, sollte der Web-Browser die dahinter notierte Zahl als maximal erlaubte Dateigröße in Bytes interpretieren (maxlength = maximal length = maximale Länge). Im obigen Beispiel wird auf diese Weise die Bytezahl auf 100000 Byte begrenzt. Wenn Sie maxlength weglassen, kann der Anwender beliebig große Dateien senden. Beachten Sie jedoch, dass diese Angabe mit Vorsicht zu genießen ist. In der HTML-Version 3.2 wurde es so bestimmt, in der Version 4.0 wird diese Funktionalität beim maxlength-Attribut dagegen nicht mehr erwähnt. Verlassen Sie sich also nicht auf diese Angabe. Sicherer ist es, bei der Weiterverarbeitung mit einem CGI-Script im Script die Dateigröße zu ermitteln und das Script davon abhängig entscheiden zu lassen, ob die Datei akzeptiert oder verworfen wird.

Wenn Sie nur bestimmte Dateitypen zulassen wollen, können Sie mit der Angabe von accept die erlaubten Dateitypen eingrenzen (accept = akzeptieren). Hinter dem Istgleichzeichen können Sie einen MIME-Typ angeben. Dabei ist auch das Wildcard-Zeichen (*) bei Subtypen erlaubt. Im obigen Beispiel werden mit text/* alle Textdateien akzeptiert. Dazu gehören reine Textdateien (*.txt), aber z.B. auch HTML-Dateien (*.html,*.htm). Verlassen Sie sich aber auch bei dieser Angabe nicht darauf, dass der Browser das tatsächlich prüft vor dem Versenden des Formulars.

Beachten Sie:

Wichtig ist, dass Sie im einleitenden <form>-Tag die Angabe enctype="multipart/form-data" notieren, wenn das Formular ein Element für Datei-Upload enthält.

Im Online-Angebot von SELFHTML aktuell finden Sie einen Feature-Artikel, der beschreibt, wie das server-seitige Verarbeiten solcher Datei-Uploads aussehen kann:
Fileupload per Perl/CGI
Um das dort beschriebene CGI-Script zu verstehen, benötigen Sie allerdings Kenntnisse in Perl.

Das Attribut value in Verbindung mit <input type="file">, mit dem das Vorbelegen der Dateiauswahl möglich wäre, wird von moderneren Browsern aus Sicherheitsgründen nicht mehr unterstützt.

Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Input-Formularelemente (<input>)
Attribut-Referenz für Input-Formularelemente (<input>)


	Versteckte Elemente
	Auswahllisten, Radio-Buttons und Checkboxen

SELFHTML/Navigationshilfen HTML/XHTML Formulare