Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Upload Dateien über HTML-Formular type="file"

Um über Formulare eine Datei mit übertragen zu können, gibt es als Attribut file. Es wird dann zusammen mit anderen erfassten Daten auch eine Datei übertragen.

Aufbau des HTML-Befehls für File-Upload

Bei dem Formularelement Radiobutton benötigen wird den HTML-Befehl <input - der Unterschied kommt durch die Angabe des Typs zustande. Hier wird file angegeben:

<input type="file" >

Wichtig: POST-Methode

Das Übertragen von Dateien über ein Formular funktioniert nur, wenn folgende beide Bedingungen erfüllt werden!

  • POST-Methode bei <form method="post">
  • enctype="multipart/form-data" muss mit in den Aufruf! Sonst wird die Datei nicht übertragen (sondern nur der Name)

Als Beispiel wäre der minimale Code:

<form method="post" enctype="multipart/form-data" >
<input type="file" name="uploaddatei" >

Einschränken der Dateiarten

Um eine keline Einschränkung der Dateiarten zu erreichen, kann über das Attribut accept dies erreicht werden. Sollen Beispielsweise nur Bilder vom Typ "JPG" zugelassen werden, muss der entsprechende MIME-Typ angegeben werden:

<input type="file" name="uploaddatei" accept="image/jpeg" >

Sollen alle Arten von Bilddateien zum Upload zugelassen werden, kann über Wildcards (der Stern) gearbeitet werden:

<input type="file" name="uploaddatei" accept="image/*" >

Möchte man gezielt mehrere Arten von Bild-Dateien zulassen, werden diese über das Attribt accept und über Komma getrennt angegeben:

<input type="file" name="uploaddatei" accept="image/png, image/jpeg" >

Typische MIME-Typs sind:

  • image/* für „alle Arten von Bild-Dateien“
  • audio/* für „alle Arten von Audio-Dateien“
  • video/* für „alle Arten von Video-Dateien“

Auch möglich ist die Angabe über die Dateiendung (wichtig ist, dass der Punkt mitgeführt wird!):

<input type="file" name="uploaddatei" accept=".png, .jpg, .jpeg" >

Interessant ist, dass bei der Angabe accept="image/*" viele mobile Geräte (Handy etc.) dem Nutzer die Möglichkeit geben, ein Foto über die Kamera aufzunehmen und hier direkt zu verwenden.

Mehrer Dateien übertragen

Um die Möglichkeit zu schaffen, dass mehrere Dateien auf einmal übertragen werden können, gibt es das Attribut multiple. Zusätzlich kommt bei dem Namen noch entsprechende Klammern (als Programmierer erkennt man den typischen Aufbau für ein Array).

<input type="file" name="uploaddatei[]" multiple >

Sicherheit: Überprüfen auf dem Server

Nach dem Upload muss unbedingt überprüft werden, ob die Datei auch den vorgegebenen Bedingungen entspricht!

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details