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!