如何在JavaScript中实现多附件上传时全部选中文件名的展示

• 初始代码未绑定触发事件：定义的updateList函数没有和文件选择框的change事件关联，选中文件后函数不会自动执行，无法触发视图更新
• 字符串变量未正确解析：fileinput.append('<i class="text">arrayFiles[i].name</i>')行中，arrayFiles[i].name被当作普通硬编码字符串输出，没有读取到实际的文件名变量值
• 循环变量未声明：循环计数变量i没有用let/var声明，会污染全局作用域，可能引发其他逻辑异常

你最终提交的解决代码已经可以满足功能需求，这里提供更规范的优化版本，减少重复DOM操作，同时兼容多次选择文件的场景：

const setupInput = () => {
  // 绑定文件选择框的change事件
  $('#input_issue').on('change', () => {
    const fileList = document.getElementById('input_issue').files;
    // 批量读取所有文件名，一次性更新文本，减少DOM操作次数
    const fileNameArr = Array.from(fileList).map(file => file.name);
    $('#button_file_upload_issue i.text').text(fileNameArr.join(', '));
  })
}

// 页面加载完成后初始化功能
$(document).ready(() => {
  setupInput();
})

• 确保#button_file_upload_issue i.text选择器和项目中实际承载文件名的元素ID、类名一致即可正常运行
• 如果需要支持用户多次选择文件追加到列表而非覆盖已有选择，只需调整逻辑，先获取已有文本再拼接新的文件名数组即可

内容的提问来源于stack exchange，提问作者ElMaestroDeToMare