Signatur
Beschreibung
Die Eigenschaft accept spiegelt das HTML-Attribut accept eines <input>-Elements wider. Wirkung hat sie nur bei type="file". Der Wert ist eine kommagetrennte Liste von Dateityp-Angaben. Damit weiß der Browser, welche Dateien er im Auswahldialog vorfiltern oder anbieten soll.
Erlaubt sind drei Arten von Angaben:
- Dateiendungen mit führendem Punkt, z. B.
.pdfoder.docx - MIME-Typen, z. B.
image/pngoderapplication/pdf - Platzhalter:
image/*,audio/*undvideo/*
Die Eigenschaft ist lesbar und schreibbar. Setzt man sie per JavaScript, ändert sich sofort auch das Attribut im DOM, und der nächste Dateidialog berücksichtigt den neuen Wert. Fehlt das Attribut, liefert die Eigenschaft einen leeren String "".
Wichtig: accept ist nur ein Hinweis für die Benutzeroberfläche und keine Prüfung. Nutzer können im Dialog meist auf „Alle Dateien“ umschalten oder Dateien per Drag & Drop ablegen. Deshalb muss der Dateityp zusätzlich im Client und vor allem auf dem Server geprüft werden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: kommagetrennte Liste aus Dateiendungen (.jpg), MIME-Typen (image/jpeg) oder Platzhaltern (image/*). |
Rückgabewert
accept-Attributs. Ist das Attribut nicht gesetzt, ein leerer String.Beispiele
Wert auslesen
// HTML: <input type="file" id="avatar" accept="image/png, image/jpeg">
const input = document.querySelector('#avatar');
console.log(input.accept);Dateityp je nach Upload-Art dynamisch setzen
const upload = document.querySelector('#upload');
const typeSelect = document.querySelector('#upload-type');
const acceptMap = {
bild: 'image/*',
dokument: '.pdf,.doc,.docx,application/pdf',
video: 'video/mp4,video/webm'
};
typeSelect.addEventListener('change', () => {
upload.accept = acceptMap[typeSelect.value] ?? '';
upload.value = ''; // bisherige Auswahl verwerfen
console.log('accept =', upload.accept);
});Ausgewählte Dateien zusätzlich gegen accept prüfen
const input = document.querySelector('input[type=file]');
const matchesAccept = (file, accept) => {
if (!accept) return true;
return accept.split(',').map(t => t.trim().toLowerCase()).some(rule => {
if (rule.startsWith('.')) return file.name.toLowerCase().endsWith(rule);
if (rule.endsWith('/*')) return file.type.startsWith(rule.slice(0, -1));
return file.type === rule;
});
};
input.addEventListener('change', () => {
const invalid = [...input.files].filter(f => !matchesAccept(f, input.accept));
if (invalid.length) {
alert(`Nicht erlaubt: ${invalid.map(f => f.name).join(', ')}`);
input.value = '';
}
});Kamera auf Mobilgeräten vorschlagen
const photo = document.createElement('input');
photo.type = 'file';
photo.accept = 'image/*';
photo.capture = 'environment'; // Rückkamera (nur mobil)
document.body.append(photo);
console.log(photo.outerHTML);// Wichtig · Fallstricke
- Keine Sicherheitsprüfung:
acceptfiltert nur den Dateidialog vor. Nutzer können den Filter umgehen, etwa per „Alle Dateien“, Drag & Drop oder mit den Entwicklertools. Dateityp und Inhalt deshalb immer serverseitig prüfen.File.typeleitet der Browser nur aus der Dateiendung ab und ist daher nicht vertrauenswürdig. - Bei anderen Typen als
type="file"bleibt die Eigenschaft wirkungslos, wird aber trotzdem gespiegelt. - MIME-Typen und Dateiendungen am besten kombinieren, z. B.
.csv,text/csv. Betriebssysteme ordnen Endungen unterschiedlich zu, und manche Typen (CSV, DOCX) erkennen sie nicht überall. - Wie der Dialog den Filter umsetzt, hängt vom Browser ab: Mobile Browser bieten bei
image/*oft Kamera und Galerie an, Desktop-Browser zeigen eher einen Dateifilter. - Eine Änderung von
acceptentfernt keine Dateien, die bereits ausgewählt wurden. Bei Bedarfinput.value = ''setzen. - Browser-Kompatibilität: wird seit Langem von allen modernen Browsern unterstützt.