Question

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

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

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

可行吗？感谢。

BTW，在这种情况下如何取消选择文件（例如，清除列表）？

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 或单击文件选择窗口中的“取消”。

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

1 个答案: