HTML input type="file" – Dateien laden

input type="file" erzeugt einen Button, mit dem der Benutzer eine oder mehrere Dateien vom lokalen System laden kann, meist, um Dateien auf den Server zu laden.

input type file – Datei Upload

input type file

Der Button für den File-Upload – das Feld input type="file" stammt aus der Steinzeit des Internets, aber hat mehr drauf, als man ihm ansieht.

<input type="file" name="upload">

type="file" hängt eine Datei an ein Formular, die bei der Übertragung auf den Server zusammen mit den Formulardaten geladen wird.

  • Die meisten Browser spielen ein Eingabefeld und eine Schaltfläche »Durchsuchen« oder »Datei auswählen« ein, damit der Benutzer die Datei in seinen lokalen Ordnern suchen kann.
  • Im <form>-Tag muss enctype="multipart/form-data" stehen. Alternativ lädt das fetch-API mit formdata Dateien auch ohne form-Element.
  • Das Attribut value wird nicht benutzt.

Wenn eine Datei ausgewählt ist, kann der Browser zusammen mit dem Namen der Datei ein kleines Vorschaubild anzeigen, damit der Benutzer die Sicherheit hat, die richtige Datei gewählt zu haben.

weitere Attribute bei type="file"
accept, multiple, required
<input type="file" name="fotos" multiple>

Mit etwas Hilfe von JavaScript muss input type="file" auch nicht in ein HTML-form-Element gepackt werden. Das JavaScript Fetch-API kommt ohne ein form-Tag aus und die Datei als Teil des Request-Bodys übergeben. Mehr dazu auf JavaScript FormData.

File Upload mit Drag & Drop

Das Attribut multiple bereitet das Eingabefeld darauf vor, dass mehrere Dateien »in einem Schwung« hochzuladen sind. Wenn der Benutzer Dateien für den Upload ausgewählt hat, zeigt der Browser die Anzahl der Dateien und u.U. ebenfalls ein kleines Vorschaubild an.

Der Benutzer muss nicht auf den Button klicken, um eine oder mehrere Dateien auszuwählen. Ohne weitere Maßnahmen kann der Benutzer die Datei oder die Dateien direkt auf das input type="file" -Feld ziehen, was aber den meisten Benutzern nicht bekannt sein dürfte und von den Browser unterschiedlich signalisiert wird.

Dateien einfach auf den Button Datei laden ziehen

Über die Größe der kontext-sensitiven Fläche entscheidet das CSS für das input-Element.

CSS-Stil für input type file

Ansonsten reagiert input type="file" nur spartanisch auf CSS: Schriftgröße und Schriftfarbe können geändert werden. Der Text »Keine Datei ausgewählt« ist nicht vom Button zu trennen, um ihn z.B. vor oder nach dem Button anzuzeigen. Beides zusammen – Button und Text bilden das Eingabefeld. background-color und padding legen sich hinter den Button und den Text.

Suchen auf mediaevent.de