HTML/Formulare/input/Datei-Upload

Aus SELFHTML-Wiki
< HTML‎ | Formulare‎ | input(Weitergeleitet von HTML/Formulare/Felder Datei-Upload)
Wechseln zu: Navigation, Suche

Mithilfe des Formularelements input type="file" kann der Anwender eine Datei von seinem lokalen Rechner zusammen mit dem Formular übertragen (Upload). Dieses Element funktioniert nur mit der POST-Methode und nicht mit GET. Außerdem muss im Formular das enctype="multipart/form-data"-Attribut notiert werden, da sonst nur der Namen und nicht die Datei selbst übertragen wird.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0

Durch das Attribut type="file" erstellt der Browser automatisch ein Eingabefeld für den Pfad zur Datei und einen Button mit dessen Hilfe eine lokale Datei ausgewählt werden kann. Die Größe des Eingabefeldes kann wie üblich mit dem size-Attribut festgelegt werden. Alle anderen gängigen CSS-Formatierungen lassen sich ebenfalls anwenden.

Mithilfe des accept-Attributs kann angegeben werden, welche MIME-Typen für den Upload vorgesehen sind. Gültige Angabe ist eine kommagetrennte Liste mit MIME-Typen, diese können auch mit Wildcards (*) verwendet werden.

Beachten Sie: Es sollte immer serverseitig eine Kontrolle durchgeführt werden, ob die hochgeladene Datei den richtigen MIME-Typ hat. Formulare lassen sich zu leicht mit JavaScript manipulieren, sodass man sich nicht auf das accept-Attribut verlassen kann.
Beachten Sie: Aus Sicherheitsgründen ist das Vorbelegen dieses Formularelements mithilfe des value-Attributs nicht möglich.
Beispiel ansehen …
<form method="post" enctype="multipart/form-data">
  <label>Wählen Sie eine Textdatei (*.txt, *.html usw.) von Ihrem Rechner aus.
    <input name="datei" type="file" size="50" accept="text/*"> 
  </label>  
  <button>… und ab geht die Post!</button>
</form>

Hier ist die Breite des Eingabefeldes auf 50 Zeichen festgelegt und es sind alle Textdateien erlaubt. Zusätzlich sei noch erwähnt, dass es sinnvoll ist einen Submit-Button hinzuzufügen, da diverse Browser neueren Datums ein unmittelbares Ausführen über das Textfeld mit dem Dateipfad der gewählten Datei der Aktion nicht mehr zulassen.

Beachten Sie: Beim Absenden des Formulars wird zwar die gewählte Datei auf den Server übertragen, jedoch nur in einem temporären Verzeichnis gespeichert. Beim Aufruf einer weiteren URL durch den Browser wird sie wieder verworfen. Es bedarf serverseitig eines Scriptes (PHP, Perl, JSP …), um die Datei nach dem Upload dauerhaft in ein Verzeichnis auf dem Server abzulegen.

mehrere Dateien auf einmal hochladen[Bearbeiten]

Mit dem booleschen Attribut multiple kann eine Mehrfachauswahl zugelassen werden, sodass anschließend mehrere Dateien vom Browser an den Server übermittelt werden. Damit die verwendete serverseitige Script-Sprache mit mehreren Dateien zu diesem input-Feld umgehen kann, ist es unter Umständen notwendig einen geeigneten Namen im name-Attribut zu notieren (PHP benötigt z.B. ein eckiges Klammernpaar wie name="datei[]", damit nicht nur die letzte übertragene Datei erkannt wird).

Beispiel: mehrere Dateien hochladen
<form action="manage_uploads.php" method="post" enctype="multipart/form-data">
  <label>Wählen Sie die hochzuladenden Dateien von Ihrem Rechner aus:
    <input name="datei[]" type="file" multiple> 
  </label>  
  <button>hochladen</button>
</form>

Der empfangende Webserver kann aus z.B. Sicherheitsgründen ein Limit für die Anzahl und die Datenmenge der zu empfangenden Dateien haben. Als HTML-Autor haben Sie darauf keinen Einfluss und selbst als Programmierer der serverseitigen Programmlogik haben Sie unter Umständen keine Möglichkeit diese Einstellungen des Servers zu ändern. In solchen Fällen benötigt man eine Lösung, bei der vom Browser die Datenmenge in passend kleinen Teilen übertragen wird, um sie dann auf der Serverseite wieder zusammen zu setzen.

Wie kann ich Datei-Upload-Formulare vorbelegen?[Bearbeiten]

Dies ist aus guten Gründen nicht möglich:

siehe auch[Bearbeiten]