input type=file选择文件后无法在控制台打印文件对象如何解决？

问题原因 #

• HTML标签存在冗余属性：<input> 标签重复声明了两次type="file"属性，属于不规范写法
• 核心逻辑问题：使用const声明的setFile函数属于块级作用域变量，没有挂载到全局window对象上，HTML内联的onchange事件只能访问全局作用域下的函数，触发事件时找不到对应方法导致功能失效。

修复方案 #

提供两种可选实现方式，均可达成需求：

方案1：将函数挂载到全局作用域

清理HTML冗余属性：

<input type="file" accept=".docx" id="fileUpload" onchange="setFile()" />

修改JS代码将函数挂载到全局：

window.setFile = () => { 
  console.log(document.getElementById('fileUpload').files[0])
}

方案2：移除内联事件，改用JS绑定监听（更推荐，避免全局污染）

移除HTML的onchange属性：

<input type="file" accept=".docx" id="fileUpload" />

JS部分改为直接绑定事件监听：

const fileUpload = document.getElementById('fileUpload')
fileUpload.addEventListener('change', () => {
  console.log(fileUpload.files[0])
})

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