HTML input type="file" – Dateien laden

input type file – Datei Upload

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

input type file

<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.
  • 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>

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.

input type="file" reagiert nur spartanisch auf CSS: Schriftgröße und Schriftfarbe können geändert werden, nicht aber das padding des Buttons. 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 den Button und den Text.

Der Benutzer muss auch nicht auf den Button klicken, um eine oder mehrere Dateien auszuwählen, sondern könnte die Datei / Dateien direkt auf das Feld ziehen – was aber den meisten Benutzern nicht bekannt sein dürfte.

Beispiel für einen File-Upload mit Javascript und PHP