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

【问题标题】：HTML: select multiple files but no file names shown?HTML：选择多个文件但没有显示文件名？
【发布时间】：2014-01-29 21:18:04
【问题描述】：

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

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

但它只显示例如“选择了 3 个文件”。最好也显示文件名。

可行吗？谢谢。

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

【问题讨论】：

标签： javascript html file-upload

【解决方案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 或在文件选择窗口中单击“取消”。

【讨论】：

谢谢！我喜欢这种方法，但我将其更改为仅在选择多个文件时添加文件名，因为当您仅选择 1 个文件时默认显示 1 个文件名。 if ( this.files.length > 1 ) { for loop... }
这很漂亮。