HTML: mehrere Dateien auswählen, aber keine Dateinamen angezeigt?

Question

Ich verwende "multiple" -Tag, damit der Benutzer mehrere Dateien zum Hochladen auswählen kann.

<input type="file" name="files[]" multiple /> 

Aber es zeigt nur z. B. "3 Dateien ausgewählt". Es wäre besser, auch Dateinamen anzuzeigen.

Ist es machbar? Vielen Dank.

BTW, in diesem Fall, wie Sie Dateien abwählen (z. B. löschen Sie die Liste)?

Answer 1

Sie können dies mit dem .files Eigenschaft auf dem Eingangselement:

document.getElementById('files').addEventListener('change', function(e) { 
 
    var list = document.getElementById('filelist'); 
 
    list.innerHTML = ''; 
 
    for (var i = 0; i < this.files.length; i++) { 
 
    list.innerHTML += (i + 1) + '. ' + this.files[i].name + '\n'; 
 
    } 
 
    if (list.innerHTML == '') list.style.display = 'none'; 
 
    else list.style.display = 'block'; 
 
});

<input type="file" id="files" multiple /> 
 
<pre id="filelist" style="display:none;"></pre>

Diese erste leert die Liste im Fall gibt es immer noch etwas von der vorherigen Auswahl, und dann geht es durch jedes Element in der Dateiliste und fügt das dann dem Element <pre> unter dem Eingang hinzu. Die <pre> wird ausgeblendet, wenn keine ausgewählten Elemente in der Liste vorhanden sind.

PS: Sie können die Liste löschen, indem Sie einfach auf die Eingabe klicken und dann entweder esc drücken oder im Dateiauswahlfenster auf "Abbrechen" klicken.