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.
Ü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.
- CSS für input type file
- Beispiel für einen File-Upload mit Javascript und PHP – Vorschau-Thumbnails anzeigen
