HTML：选择多个文件但没有显示文件名？

Question

我使用“多个”标签让用户选择多个文件上传。

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

但它只显示例如“3个文件被选中”。还会显示文件名称会更好。

它可行吗？谢谢。

顺便说一句，在这种情况下如何取消选择文件（例如清除列表）？

Answer 1

您可以通过输入元素上.files属性做到这一点：

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>

这首先清空的情况下，仍然有从以前选择的东西的清单，然后经过然后将其添加到输入下方的<pre>元素。如果列表中没有选定项目，则将隐藏<pre>。

PS：您可以通过点击输入清除列表，然后按esc或单击文件选择窗口上的“取消”。