Datei-Upload-Feld - beim Anklicken öffnet ein Dateiauswahldialog
Diese Sorte Formularelement erlaubt dem Anwender, Dateien von seinem lokalen Rechner(netz) 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.
<form action="/kalender.py" method="post" enctype="multipart/form-data"> <p><label>Bis zu 12 Fotos:<br> <input name="pics[]" type="file" multiple accept="image/*"> </label></p> <input type="submit" value="hochladen"> </form>
Mit <input type="file"> markieren Sie ein Element für Datei-Upload. Der Web-Browser sollte dann ein Eingabefeld anzeigen, das dem Anwender erlaubt, den eine oder mehrere lokal gespeicherte Datei(en) einzugeben oder in einem Dateiauswahldialog auszuwählen.
Datei-Uploads funktionieren nur mit method="post" im einleitenden <form>-Tag des zugehörigen Formulars. Wichtig ist außerdem, dass Sie im einleitenden <form>-Tag die Angabe enctype="multipart/form-data" notieren. Andernfalls werden lediglich die Dateiname 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 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.
Bei Verwendung des Attributs multiple gilt das Gleiche wie im Zusammenhang mit Auswahllisten. Mehrere ausgewählten 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, um 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 <input type="file">, 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 Trickserei browser-übergreifend einheitlich gestaltbar, da es in verschiedenen Browsern mit unterschiedlichen Control-Ressourcen realisiert wird.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.