获取文件上传元素的文件名

Question

尝试显示文件输入元素中的文件名。当我在onchange函数中时，我可以控制台日志，但不能在addeventlistener中。在console.log("Inside change eventlistener"(下面的代码中；将不会执行。我可以记录事件侦听器内部的情况并获取文件名以显示它们吗？这是代码笔。非常感谢。

html:

<label>Attachments</label>
<div>
<input type="file" class="form-control input-lg" name="attachments" id="attachments" multiple onchange="getFileData()">
</div>

js:

function getFileData() {
console.log('Inside getFileData()...')
var elem = document.getElementById('attachments');
console.log(elem);
elem.addEventListener('change', function(e) {
console.log('Inside change eventlistener');
console.log(e.target);
var fileName = e.target.files[0].name;
console.log(fileName);
});
};

更新：我可以控制台文件名，但仍然无法向用户显示名称。如何在html页面上显示中的文件名。elem.value=。。。不起作用。

更新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);
};

Answer 1

您可以尝试类似的

var elem = document.getElementById('attachments');
elem.addEventListener('change', getFileData);
function getFileData() {
const files = this.files;
const list = document.getElementById("result");
let child;

for ( let i = 0; i < files.length; i++) {
child = document.createElement("li")
child.textContent = files[i].name;

list.append(child);
}
}

<label>Attachments</label>
<div>
<input type="file" class="form-control input-lg" name="attachments" id="attachments" multiple>
</div>
<ul id="result"></ul>