JavaScript 中监听文件上传需绑定 change 事件到 <input type="file"> 元素，从 event.target.files 获取 FileList 对象，注意判空、转数组及使用 FileReader 读取内容。
在 JavaScript 中，监听文件上传的 change 事件是获取用户选择的文件对象（File 或 FileList）的标准方式。关键在于绑定事件到 <input type="file"> 元素，并从事件对象的 target.files 属性中读取。
绑定 change 事件监听器
必须使用 change 而非 click 或 input，因为只有 change 在用户真正选中文件（包括取消后重新选择）时触发，且能可靠反映最终选中的文件列表。
- 确保元素已挂载到 DOM 后再绑定事件，或使用事件委托（对动态创建的 input 更安全）
- 推荐使用
addEventListener，避免覆盖已有事件处理函数 - 示例：
<input type="file" id="fileInput">
const input = document.getElementById('fileInput');
input.addEventListener('change', handleFileSelect);
从 event.target.files 获取 FileList
event.target.files 是一个只读的 FileList 对象（类似数组，但不是 Array），每个项都是 File 实例，继承自 Blob，具备 name、size、type、lastModified 等属性。
- 单文件上传：
const file = e.target.files[0];（注意判空，用户可能取消选择导致files.length === 0） - 多文件上传：
const files = Array.from(e.target.files);转为真数组以便使用map、filter等方法 - 不要直接修改
files，它不可写；如需过滤或重组，操作副本即可
常见注意事项与健壮写法
用户行为可能导致 files 为空或内容变化，需主动防御：
- 始终检查
e.target.files.length > 0，再访问[0]，否则会得到undefined - 若支持多选，用循环遍历
files，而非硬编码索引 - 可配合
accept属性（如accept="image/*,.pdf"）做前端类型提示，但不可替代服务端校验 - 不建议依赖
input.value获取文件名——它只返回伪路径（如C:\fakepath\abc.jpg），且不可靠
读取文件内容（可选扩展）
拿到 File 对象后，如需预览或上传前处理，常用 FileReader：
-
reader.readAsText(file)→ 读为字符串（适合文本类） -
reader.readAsDataURL(file)→ 生成 data URL（适合图片预览） -
reader.readAsArrayBuffer(file)→ 读为二进制缓冲区（适合解析 Excel、音频等） - 务必监听
reader.onload回调获取结果，异步操作不可直接 return
