Tipp: Submit-Button im Upload-Formular erst anzeigen, wenn Dateien ausgewählt sind

Was die Usability von Upload-Formularen ziemlich beeinträchtigt, sind die zwei Buttons, die man benötigt: Den Dateibrowser-Button und den Submit-Button. Ich erlebe es immer wieder, dass Menschen auf den „Hochladen“-Button klicken und sich wundern, dass nichts passiert. Wenn man das Upload-Formular auch noch mit HTML 5 Drag and Drop-Fähigkeit ausstattet, ist der Submit-Button, sofern noch keine Dateien ausgewählt sind, noch überflüssiger.

So sollte ein Upload-Formular idealerweise aussehen – solange keine Dateien ausgewählt sind, ist der Submit-Button unsichtbar:

Erst wenn man per Dateibrowser eine oder mehrere Dateien ausgewählt hat, erscheint der „Hochladen“-Button:

Und wie macht man das? Ganz einfach: Der Submit-Button kommt in ein Span-Element, das per CSS unsichtbar gemacht wird:

<span id='uploadButton' style='display:none;'><input type='submit' name='hochladen' value='Hochladen' /></span>

Beim Dateibrowser-Button wird das onChange-Event abgefragt. Wenn es aktiv wird, wenn also Dateien ausgewählt wurden, wird das Span-Element, das den Submit-Button beherbergt, sichtbar gemacht:

<input type="file" name="bilddatei[]" multiple="" onchange="document.getElementById('uploadButton').style.display='block'" />