Javascript 获取文件上载元素的文件名

试图显示文件输入元素中的文件名。当我在onchange函数中而不是addeventlistener中时，我能够控制日志。在console.log下面的代码中（'insidechangeventlistener'）；不会执行。我可以记录在事件侦听器中并获取文件名以显示它们吗？是代码的代码笔。多谢各位

html:

附件

js:

更新： 我能够控制文件名，但仍然无法向用户显示文件名。如何在html页面上显示中的文件名。元素值=。。。不起作用

更新JS:

function getFileData() {
  console.log('Inside getFileData()...')
  var elem = document.getElementById('attachments');
  var files = document.getElementById('attachments').files;
  var names = '';
  for (let i = 0; i < files.length; i++) {
    console.log(files[i].name);
    names += files[i].name;
  }
  console.log(names);
  console.log(Object.keys(elem));
  //elem.setAttribute('value', names);

};

函数getFileData（）{ console.log（'Inside getFileData（）…'） var elem=document.getElementById（'attachments'）； var files=document.getElementById（'attachments'）.files； 变量名称=“”； for（设i=0；i您可以试试这样的方法

var elem=document.getElementById（'attachments'）；
元素addEventListener（'change'，getFileData）；
函数getFileData（）{
const files=this.files；
const list=document.getElementById（“结果”）；
让孩子；
for（设i=0；i

附件
在事件侦听器中添加事件侦听器几乎总是一个错误。您希望通过这样做实现什么？我试图实现的是获取并显示正在上载的文件的文件名。对了，为什么要添加另一个事件侦听器？这没有意义；您已经有一个事件侦听器。如何在html中显示它？谢谢。我更新了我的代码片段
function getFileData() {
  console.log('Inside getFileData()...')
  var elem = document.getElementById('attachments');
  var files = document.getElementById('attachments').files;
  var names = '';
  for (let i = 0; i < files.length; i++) {
    console.log(files[i].name);
    names += files[i].name;
  }
  console.log(names);
  console.log(Object.keys(elem));
  //elem.setAttribute('value', names);

};