Signatur
Beschreibung
Die Eigenschaft multiple eines HTMLInputElement liest oder setzt das gleichnamige HTML-Attribut. Ist sie true, darf das Feld mehr als einen Wert enthalten. Sie wirkt aber nur bei zwei Eingabetypen: type="file" und type="email". Bei allen anderen Typen hat sie keine Wirkung.
Bei Datei-Feldern kann der Nutzer im Dateidialog mehrere Dateien auf einmal auswählen. Du erreichst sie danach über die FileList in input.files. Bei E-Mail-Feldern darf der Nutzer mehrere Adressen durch Kommas getrennt eingeben. Die Validierung durch den Browser prüft dann jede Adresse für sich.
Weil es sich um ein reflektiertes boolesches Attribut handelt, entspricht input.multiple = true dem Aufruf setAttribute("multiple", ""). Mit input.multiple = false wird das Attribut vollständig entfernt. Typische Einsatzfälle sind Upload-Formulare für Galerien oder Anhänge und Empfängerfelder für Einladungen.
Rückgabewert
true, wenn das Attribut multiple gesetzt ist, sonst false. Beim Setzen wird der Wert in einen booleschen Wert umgewandelt.Beispiele
Mehrfachauswahl bei einem Datei-Upload aktivieren
const input = document.createElement('input');
input.type = 'file';
input.multiple = true;
input.accept = 'image/*';
document.body.append(input);
console.log(input.multiple); // Eigenschaft
console.log(input.hasAttribute('multiple')); // gespiegeltes Attribut
console.log(input.outerHTML);Mehrere ausgewählte Dateien verarbeiten
// HTML: <input type="file" id="anhaenge" multiple>
const input = document.querySelector('#anhaenge');
input.addEventListener('change', () => {
const dateien = [...input.files];
const gesamtKB = dateien.reduce((summe, d) => summe + d.size, 0) / 1024;
console.log(`${dateien.length} Datei(en), ${gesamtKB.toFixed(1)} KB`);
dateien.forEach((d) => console.log(`- ${d.name} (${d.type || 'unbekannt'})`));
});Mehrere E-Mail-Empfänger zulassen und prüfen
const email = document.createElement('input');
email.type = 'email';
email.multiple = true;
email.value = 'anna@example.com, ben@example.org';
console.log(email.checkValidity());
email.value = 'anna@example.com, kein-mail';
console.log(email.checkValidity());
// Ohne multiple ist schon eine Liste ungültig
email.multiple = false;
email.value = 'anna@example.com, ben@example.org';
console.log(email.checkValidity());Mehrfachauswahl per Checkbox umschalten
// HTML: <input type="file" id="upload"> <input type="checkbox" id="mehrere">
const upload = document.querySelector('#upload');
const schalter = document.querySelector('#mehrere');
schalter.addEventListener('change', () => {
upload.multiple = schalter.checked;
upload.value = ''; // bisherige Auswahl zurücksetzen
console.log('Mehrfachauswahl:', upload.multiple);
});// Wichtig · Fallstricke
- Nur bei
fileundemailwirksam: Bei anderen Typen wietextodernumberlässt sich die Eigenschaft zwar setzen, sie hat aber keine Wirkung. Für Auswahllisten mit Mehrfachauswahl gibt es stattdessenHTMLSelectElement.multiple. valuebei Datei-Feldern: Auch bei mehreren Dateien liefertinput.valuenur den ersten Dateinamen (mit dem Pseudo-PfadC:\fakepath\…). Nutze deshalb immerinput.files.- Boolesches Attribut:
setAttribute('multiple', 'false')aktiviert die Mehrfachauswahl trotzdem, weil nur zählt, ob das Attribut vorhanden ist. Zum Deaktivieren verwendest duinput.multiple = falseoderremoveAttribute('multiple'). - E-Mail-Werte: Der Browser entfernt Leerzeichen um die Kommas.
valueliefert eine einzige Zeichenkette, die du selbst mitsplit(',')aufteilen musst. Die clientseitige Validierung ersetzt keine Prüfung auf dem Server. - Mobilgeräte: Manche mobilen Browser und Kamera-Dialoge beachten
multiplenur eingeschränkt, besonders zusammen mitcapture. - Kompatibilität: wird von allen modernen Browsern unterstützt, ab Internet Explorer 10.