HTML5-Handbuch - die neuen Features von HTML5

zusammen mit dem Formular zu versenden. Auf diese Weise ist es möglich, Anwendern das Uploaden (Hochladen) von Dateien auf den Server-Rechner zu ermöglichen.
Beispiel
    

    

    Bis zu 12 Fotos:

    
    
    

    
    

Erläuterung
    Mit

markieren Sie ein Element für Datei-Upload. Der Web-Browser sollte dann ein Eingabefeld anzeigen, das dem Anwender erlaubt, eine oder mehrere lokal gespeicherte Datei(en) einzugeben oder in einem Dateiauswahldialog auszuwählen.
    Bild 8.9: Datei-Upload-Feld – beim Anklicken öffnet sich ein Dateiauswahldialog.
    Datei-Uploads funktionieren nur mit
method="post"
im einleitenden

-Tag des zugehörigen Formulars. Wichtig ist außerdem, dass Sie im einleitenden

-Tag die Angabe
enctype="multipart/form-data"
notieren. Andernfalls werden lediglich die Dateinamen von ausgewählten Dateien übermittelt, nicht jedoch die Dateien selbst.
    Auch Datei-Upload-Felder sollten einen Bezeichnernamen erhalten, und zwar mit dem Attribut
name
.
    Wenn Sie wie im obigen Beispiel das Standalone-Attribut
multiple
angeben, kann der Anwender mehrere Dateien auf einmal hochladen. Wenn Sie auf die Angabe verzichten, kann er genau eine Datei hochladen. Der angebotene Dateiauswahldialog erlaubt es dann, mehrere Dateien auszuwählen.
    Wenn Sie nur bestimmte Dateitypen zulassen wollen, können Sie mit dem Attribut
accept
die erlaubten Dateitypen eingrenzen ( accept = akzeptieren). Als Wert können Sie diesem Attribut einen MIME-Typ zuweisen. Dabei ist auch das Wildcard-Zeichen (
*
) bei Subtypen erlaubt. Explizit genannt werden in der HTML5-Spezifikationen die Wildcard-Angaben
image/*
für Grafiken,
audio/*
für Audio-Formate,
video/*
für Video-Formate. Im obigen Beispiel werden mit
image/*
alle Arten von Bildern akzeptiert. In der Praxis kontrollieren jedoch nur wenige Browser (z. B. Opera ab Version 10.5) die
accept
-Angabe. Das bedeutet, dass Sie bei einer serverseitigen Verarbeitung der Formulardaten auf jeden Fall kontrollieren müssen, ob Dateien in den gewünschten Formaten hochgeladen wurden.
Weitere Hinweise
    Bei Verwendung des Attributs
multiple
gilt das Gleiche wie im Zusammenhang mit Auswahllisten. Mehrere ausgewählte Dateien werden, wenn das Formular an ein serverseitiges Script gesendet wird, als Array übergeben. Bei PHP funktioniert das jedoch nur, wenn der Name des Feldes mit eckigen Klammern endet, so wie im obigen Beispiel bei
name="pics[]"
.
    Beachten Sie jedoch, dass bei Namen dieser Art in JavaScript keine Zugriffe wie
document.Formularname.Elementname[]
möglich sind. Stattdessen müssen Sie die Syntax
document.forms["Formularname"].elements["Elementname[]"]
benutzen, oder Sie greifen über andere Möglichkeiten wie das
id
-Attribut auf ein solches Element zu.
    Die Größe des Feldteils für die direkte Eingabe von Dateipfaden, sofern angezeigt, können Sie mit dem Attribut
size
bestimmen ( size = Größe). Erwartet wird die Anzahl im Feld sichtbarer Zeichen.
    Das Attribut
maxlength
, das in HTML 3.2 im Zusammenhang mit Datei-Upload-Feldern dafür vorgesehen war, die maximal erlaubte Dateigröße zu bestimmen, wird seit HTML 4.01 im Zusammenhang mit Datei-Upload-Feldern nicht mehr genannt. In der Praxis haben es die Browser ohnehin nie beachtet. Es ist also erforderlich, die Dateigröße bei der serverseitigen Verarbeitung zu kontrollieren und zu große Dateien gegebenenfalls zu löschen.
    Das Attribut
value
in Verbindung mit

, mit dem das Vorbelegen der Dateiauswahl möglich wäre, wird von aktuellen Browsern aus Sicherheitsgründen nicht unterstützt.
    Der Dateiauswahldialog ist abhängig von der verwendeten grafischen Benutzeroberfläche des Anwenders. Er ist weder mit HTML noch mit CSS beeinflussbar. Auch sonst ist das Datei-Upload-Feld mittels CSS nur mit viel Aufwand browserübergreifend einheitlich gestaltbar, da es in verschiedenen Browsern mit unterschiedlichen Control-Ressourcen realisiert wird.
Gestaltung von Upload-Feldern
    Styling an input type="file"
    Englischsprachiger Artikel, der eine Lösung beschreibt, um ein File-Upload-Feld browser-übergreifend einheitlich zu gestalten.