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

Question

我使用"multiple"标签让用户选择多个文件进行上传.

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

但它只显示例如"3个文件被选中".最好还显示文件名.

它可行吗？谢谢.

BTW,在这种情况下如何取消选择文件(例如,清除列表)？

Answer 1

您可以使用.filesinput元素上的属性执行此操作:

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