Datei-Upload-Felder wirken einfach. Ein Button mit "Datei auswählen", und das Formular sendet die Daten. Aber Datei-Uploads sind heikle Momente. Die Person vertraut dir ihren Lebenslauf, ihr Steuerdokument, ihr Produktfoto an. Wenn der Upload unklar, sperrig wirkt oder so, als sei er fehlgeschlagen, bricht sie das Formular ab. Wenn sie nicht weiss, welche Dateitypen du annimmst oder wie gross die Datei sein darf, verschwendet sie Zeit mit dem Hochladen der falschen Datei und hört dann, dass es nicht geklappt hat. Wenn der Upload unsicher wirkt, zweifelt sie an der Vertrauenswürdigkeit deiner Website. Dieser Artikel zeigt, was Datei-Upload-Felder gut macht, wie du Nutzer und deine Website schützt und was die meisten Formulare falsch machen, sodass Menschen nicht zu Ende gehen.
Ein Datei-Upload-Feld tut mehr, als Dateien anzunehmen. Es erfasst Informationen über Erlaubnisse. Wer einen Lebenslauf hochlädt, sagt: "Hier sind meine Daten, nutze sie für die Auswahl." Wer ein Dokument hochlädt, sagt: "Ich vertraue dir damit." Das Upload-Feld muss klar sagen, was du mit der Datei machst, warum du sie brauchst und dass der Upload sicher ist.
Warum Datei-Uploads anders sind als andere Formularfelder
Ein Textfeld nimmt Wörter an. Ein E-Mail-Feld nimmt eine E-Mail-Adresse an. Ein Datei-Upload-Feld nimmt Dateien jeder Grösse, jedes Typs und jeder Herkunft an. Das macht Datei-Uploads in drei Punkten grundlegend anders als andere Formularfelder.
Erstens bergen Datei-Uploads ein Sicherheitsrisiko. Eine schädliche Datei auf deinem Server kann deine Website beschädigen, Daten stehlen oder die Geräte deiner Besucher infizieren. Textfelder und E-Mail-Felder haben klare Grenzen. Datei-Uploads nicht. Jemand könnte ein getarntes ausführbares Programm, ein Skript oder Schadsoftware hochladen. Du musst also jeden Upload prüfen und absichern.
Zweitens brauchen Datei-Uploads klaren Kontext. Eine Person muss wissen, welche Datei sie hochladen soll, bevor sie auf dem Computer zu suchen beginnt. Ein E-Mail-Feld erklärt sich selbst. Ein Datei-Upload-Feld muss sagen: "Lade deinen Lebenslauf als PDF oder DOC hoch, höchstens 5 MB." Ohne diese Klarheit suchen Menschen minutenlang nach einer Datei und stellen dann fest, dass sie das falsche Format hat oder zu gross ist.
Drittens sind Datei-Uploads langsam. Eine Datei mit 10 MB über 4G auf dem Handy hochzuladen dauert. Die Person wartet. Sie muss wissen, dass der Upload läuft und nicht hängt oder eingefroren ist. Ein Ladezustand und eine Fortschrittsanzeige sind unverzichtbar.
Das Upload-Feld selbst und seine Beschriftung
Das Upload-Feld ist der Button, auf den Menschen klicken, um eine Datei zu wählen. Der Text auf dem Button zählt. Er sollte sagen, was als Nächstes passiert.
"Datei auswählen" ist vage. "Dateien durchsuchen" ist besser. "Lebenslauf hochladen" ist am besten. Der Buttontext sollte die konkrete Datei nennen, die du willst. So weiss die Person genau, wonach sie auf ihrem Computer suchen soll.
Die Beschriftung über dem Button sollte die Anforderung wiederholen. "Lebenslauf (PDF oder DOC, max. 5 MB)". Setz Grössenlimit und erlaubte Formate direkt unter die Beschriftung. Versteck diese Information nicht hinter einem Hilfe-Symbol oder in kleinem grauem Text. Menschen müssen sie sofort sehen, sonst wissen sie nicht, was sie hochladen sollen.
Wenn dein Formular mehrere Dateien annimmt, sollte der Button "Dateien hinzufügen" oder "Mehrere Dateien hochladen" heissen. Ein Upload-Feld für eine Datei, das plötzlich zwei Dateien annimmt, verwirrt. Sei eindeutig.
Wenn der Upload freiwillig ist, sag das. "Portfolio (freiwillig, JPG oder PNG, max. 20 MB pro Bild)". Wenn der Upload Pflicht ist, sollte die Beschriftung "Pflichtfeld" sagen oder ein Sternchen haben. Geh nicht davon aus, dass Menschen es verstehen.
Erlaubte Dateitypen und wie du sie klar nennst
Du kannst nicht jeden Dateityp annehmen. Dein Bewerbungsformular braucht keine JPEG-Fotos. Dein Dokumentenformular braucht keine Videodateien. Du musst genau festlegen, welche Dateitypen du annimmst.
Nutze keinen Fachjargon. Schreib nicht "MIME-Typen" oder "Dateiendungen". Schreib "PDF, Textdokumente oder Exporte aus Google Docs". Schreib "Fotos als JPG oder PNG". Schreib "Tabellendateien". Nutze die Namen, die Menschen verstehen.
Wenn eine Person eine Datei im falschen Format hochlädt, muss die Fehlermeldung konkret sein. Nicht "Ungültiger Dateityp." Sondern: "Dieses Formular nimmt PDF oder Textdokumente an. Bitte wandle deine Datei um und versuche es erneut." Sag, was schiefgelaufen ist und was sie tun kann.
Wenn dein Formular für verschiedene Felder verschiedene Dateitypen braucht, mach jedes klar. Eine Bewerbung verlangt vielleicht einen Lebenslauf als PDF und ein Anschreiben als Textdokument. Jedes Feld sollte seinen eigenen Button und seine eigenen erlaubten Typen haben. Lass Menschen nicht raten, welche Datei wohin gehört.
Arbeite mit einer Positivliste für Dateitypen, nie mit einer Negativliste. Sag nicht "alle Dateitypen ausser ausführbaren Dateien." Nenne genau, welche Typen erlaubt sind. Eine Positivliste ist für Nutzer einfacher und für die Sicherheit stärker.
Dateigrössenlimits und wie du damit umgehst
Jedes Datei-Upload-Feld braucht eine maximale Dateigrösse. Ohne sie könnte jemand versehentlich ein Video mit 500 MB hochladen, und dein Server stürzt ab oder hat keinen Speicher mehr.
Das Grössenlimit muss zu dem passen, was Menschen wirklich nutzen. Ein Lebenslauf hat meist 1 bis 3 MB. Setz dein Limit auf 10 MB, um Spielraum zu lassen. Ein Profilfoto hat 2 bis 5 MB. Setz dein Limit auf 20 MB. Ein Videoclip kann 50 MB bis 500 MB haben. Setz dein Limit danach, was du wirklich brauchst.
Sag den Menschen das Grössenlimit, bevor sie hochladen. "Die maximale Dateigrösse ist 5 MB." Setz es direkt neben den Button. Wenn jemand eine zu grosse Datei hochlädt, sollte der Fehler sofort und klar erscheinen. Kein Ladekreis, der 30 Sekunden dreht und dann scheitert. Zeig den Fehler, sobald die Datei gewählt ist, bevor der Upload beginnt.
Wenn du grosse Dateien unterstützt, erwäge Uploads in Teilen oder fortsetzbare Uploads. Wenn jemandes Datei mit 100 MB auf halbem Weg scheitert, kann er mit einem fortsetzbaren Upload dort weitermachen, wo es aufgehört hat, statt von vorn zu beginnen. Das verhindert Frust bei langsamen Verbindungen.
Drag-and-drop und mehrere Auswahlwege
Datei-Upload-Felder sollten mehrere Wege zur Auswahl von Dateien unterstützen. Manche klicken den Button. Manche ziehen Dateien vom Desktop. Manche durchsuchen ihre Fotomediathek auf dem Handy. Du musst alle unterstützen.
Der Button ist der Hauptweg. Er öffnet den Datei-Browser des Geräts, der auf jedem Gerät und in jedem Browser funktioniert.
Drag-and-drop ist der zweite Weg. Eine Person sollte eine Datei vom Desktop ziehen und im Upload-Bereich ablegen können. Das fühlt sich schneller und natürlicher an, als auf einen Button zu klicken und zu warten, bis sich der Datei-Browser öffnet. Zeig deutlich an, wenn jemand eine Datei über die Ablagezone zieht. Der Bereich sollte aufleuchten, die Farbe ändern oder einen gestrichelten Rand zeigen. So sehen Menschen, dass sie die Datei hier ablegen können.
Auf dem Handy läuft die Dateiauswahl anders. Man tippt auf den Button und wählt zwischen Fotomediathek, Dateien-App oder einem neuen Foto. Unterstütze, was auf dem Gerät funktioniert. Beschränke Handynutzer nicht nur aufs Klicken.
Wenn dein Formular mehrere Dateien annimmt, erlaube sowohl die Auswahl mehrerer Dateien auf einmal als auch das einzelne Hinzufügen. Lass Menschen fünf Dateien auf einmal im Datei-Browser auswählen. Lass sie danach auch noch eine weitere hinzufügen. Zwing nicht dazu, die gesamte Auswahl in einem einzigen Browserfenster zu machen.
Zeigen, was hochgeladen wurde, und Dateien entfernen
Nachdem jemand eine Datei gewählt hat, zeig genau, was er hochgeladen hat. Zeig Dateiname, Dateigrösse und ein kleines Symbol für den Dateityp. So bestätigt er, dass er die richtige Datei hochgeladen hat.
Wenn das Formular mehrere Dateien annimmt, zeig sie alle in einer Liste. Lass Menschen sehen, was sie gleich absenden. Wenn sie die falsche Datei hochgeladen haben, lass sie diese entfernen und eine andere hochladen, bevor das Formular gesendet wird.
Der Entfernen-Button sollte "Entfernen" heissen oder ein X-Symbol haben. Ein Klick sollte die Datei aus der Upload-Liste löschen. Er sollte die Datei nicht vom Computer löschen, nur aus dem Formular.
Wenn jemand eine Datei ersetzen muss, lass ihn nicht erst entfernen und neu hochladen. Lass ihn in einem Ablauf auf den Entfernen-Button und dann wieder auf den Upload-Button klicken. Oder erlaube einen Klick auf die Datei, um den Browser zu öffnen und direkt eine Ersatzdatei zu wählen. Weniger Schritte bedeuten höhere Abschlussquoten.
Fortschrittsanzeige und was während des Uploads zu zeigen ist
Datei-Uploads brauchen Zeit. In dieser Zeit wartet die Person und fragt sich, ob etwas passiert. Du musst Fortschritt zeigen.
Ein Fortschrittsbalken ist die klarste Option. Er zeigt einen Prozentwert. 25 %. 50 %. 75 %. Fertig. Man sieht ihn wandern und weiss, dass der Upload läuft. Ein Balken, der sofort von 0 % auf 100 % springt, hilft nicht. Zeig gleichmässigen Fortschritt.
Wenn du keinen genauen Prozentwert zeigen kannst, zeig einen Ladekreis oder eine Ladeanimation. Etwas, das sich bewegt und Aktivität zeigt. Zeig keinen statischen Ladezustand ohne Bewegung. Ein statischer Ladezustand wirkt eingefroren.
Mach den Absende-Button nie klickbar, während eine Datei hochgeladen wird. Graue ihn aus oder deaktiviere ihn. Lass Menschen nicht mehrfach auf Absenden klicken, während eine Datei hochgeladen wird. Das kann doppelte Uploads oder Fehler verursachen.
Wenn der Upload länger als drei Sekunden dauert, zeig die geschätzte Restzeit. "Wird hochgeladen. Noch etwa 30 Sekunden." oder "Wird hochgeladen. Grosse Datei." Lass Menschen nicht rätseln, wie lange es noch dauert.
Fehlerbehandlung und warum vage Fehler Abschlüsse kosten
Upload-Fehler passieren. Eine Datei ist beschädigt. Eine Netzwerkverbindung bricht ab. Eine Datei ist zu gross. Ein nicht unterstütztes Format wurde hochgeladen. Wenn ein Fehler auftritt, entscheidet deine Meldung, ob die Person ihn behebt oder das Formular abbricht.
Ein vager Fehler wie "Upload fehlgeschlagen. Bitte versuche es erneut." sagt nichts. Was soll sie erneut versuchen? Was ist schiefgelaufen? Ist die Datei beschädigt? Ist das Netzwerk gestört? Ist der Dateityp falsch? Vage Fehler lassen Menschen hilflos zurück.
Ein konkreter Fehler benennt das Problem. "Diese Datei ist zu gross. Deine Datei hat 25 MB. Das Maximum sind 10 MB. Bitte komprimiere sie oder wähle eine kleinere Datei." "Dieses Dateiformat wird nicht unterstützt. Dieses Formular nimmt nur PDF und Textdokumente an. Bitte wandle deine Datei in PDF um und versuche es erneut."
Zeig den Fehler an einer klaren Stelle. Nicht versteckt in grauem Text am Ende des Formulars. Nutze einen roten Hintergrund, einen roten Rand oder ein rotes Symbol. Lenke die Aufmerksamkeit darauf, damit man den Fehler sofort sieht.
Lösche die Datei bei einem Fehler nicht aus der Upload-Liste. Lass sie sichtbar, damit man weiss, welche Datei das Problem hatte. Lass Menschen es an Ort und Stelle beheben oder die Datei ersetzen.
Sicherheit und Schutz von Nutzer und Website
Datei-Uploads sind eine Schwachstelle. Wer eine Datei mit verstecktem Code hochlädt, kann deinen Server beschädigen. Ein schlechtes Upload-System kann die Datei anderen Nutzern oder Angreifern zugänglich machen.
Der erste Sicherheitsschritt ist die Prüfung des Dateityps. Vertraue nicht der Dateiendung. Eine Datei namens "lebenslauf.pdf" kann in Wirklichkeit ausführbaren Code enthalten. Prüfe den Inhalt der Datei selbst, nicht nur den Namen. Das nennt man MIME-Typ-Prüfung. Der Server liest den tatsächlichen Inhalt der Datei und bestätigt, dass es wirklich ein PDF ist, wirklich ein Bild, was auch immer du erwartest.
Der zweite Schritt ist, die Datei nach dem Upload umzubenennen. Speichere Dateien nicht unter dem Namen, den Nutzer ihnen gegeben haben. Benenne sie automatisch um. Aus "lebenslauf.pdf" wird auf deinem Server "upload-a4f9e2k1.pdf". Das verhindert, dass jemand den Dateipfad errät und direkt darauf zugreift oder versucht, Code auszuführen, indem er eine Datei mit einem bestimmten Namen hochlädt.
Der dritte Schritt ist, Dateien ausserhalb des Web-Verzeichnisses zu speichern. Leg hochgeladene Dateien nicht in einen Ordner, der direkt im Internet erreichbar ist. Speichere sie getrennt. Wenn jemand seine Datei herunterladen muss, schick sie über einen sicheren Link, der abläuft, und nicht über eine direkte URL zum Dateipfad.
Der vierte Schritt sind Grenzen für Dateigrösse und Uploads. Begrenze die Grösse jeder Datei. Begrenze die Zahl der Dateien, die jemand hochladen kann. Begrenze, wie viele Uploads eine einzelne Person pro Stunde machen darf. Diese Grenzen verhindern Missbrauch und schützen deinen Server.
Der fünfte Schritt ist eine Anmeldung. Wenn dein Formular nicht öffentlich ist, verlange, dass sich Nutzer vor dem Upload anmelden. So können keine beliebigen Leute aus dem Internet schädliche Dateien auf deinen Server laden.
Der sechste Schritt ist HTTPS. Jeder Datei-Upload muss bei der Übertragung verschlüsselt sein. Wenn du eine Datei über normales HTTP hochlädst, kann ein Angreifer im Netzwerk sie abfangen. Nutze für jedes Formular mit Datei-Uploads immer HTTPS.
So hilft WEMASY beim Bau sicherer Datei-Upload-Formulare
Der Formular-Builder von WEMASY enthält Datei-Upload-Felder mit eingebauter Sicherheit und Funktionen für ein gutes Nutzererlebnis. Du legst erlaubte Dateitypen, maximale Dateigrössen und die Frage fest, ob Uploads Pflicht oder freiwillig sind, ohne Code zu schreiben. Der Formular-Builder prüft Dateitypen auf Client- und Serverseite, um schädliche Uploads zu verhindern.
Uploads über WEMASY-Formulare nutzen sichere HTTPS-Verschlüsselung. Dateien werden ausserhalb deines Website-Verzeichnisses gespeichert und über sichere, ablaufende Download-Links ausgeliefert. Du musst diese Infrastruktur nicht selbst bauen.
Die Upload-Oberfläche enthält Drag-and-drop, Dateivorschau, Fehlerbehandlung und Fortschrittsanzeige. Die Formulare zeigen Nutzern automatisch, welche Dateitypen erlaubt sind und welche Grössenlimits gelten. Uploads am Handy und am Computer werden unterstützt.
Du kannst Buttontext, erlaubte Dateitypen und Grössenlimits an die Bedürfnisse deines Formulars anpassen. Sieh nach, welche Formularfunktionen in deinem WEMASY-Tarif enthalten sind.