HTML/Formulare/Felder Datei-Upload

Aus SELFHTML-Wiki
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.

  • Android
  • 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 mithilfe dem 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.
<form action="#" method="post" enctype="multipart/form-data"> <p> Wählen Sie eine Textdatei (*.txt, *.html usw.) von Ihrem Rechner aus:<br> <input name="Datei" type="file" size="50" accept="text/*"> </p> <button type="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.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke