监听<input type="file">的change事件是获取用户选中文件的最可靠方式，它在用户确认选择后触发，通过event.target.files可访问FileList对象，支持多选和跨平台兼容。
在 JavaScript 中监听文件上传表单的“选中文件”事件，核心是监听 `` 元素的 change 事件。它会在用户通过文件选择对话框确认选中文件（包括取消后重新打开再选）时触发，且能可靠获取到所选文件列表。
监听 change 事件获取文件
这是最常用、最可靠的方式：
-
change事件只在用户真正完成选择（点击“打开”或“确定”）后触发，不会因聚焦、点击等误触发； - 通过
event.target.files可拿到FileList对象，其中每个项都是File实例（继承自Blob）； - 支持多选（需加
multiple属性），files是类数组，可用[...files]转为数组操作。
示例：
<input type="file" id="upload" accept=".jpg,.png" multiple>
const input = document.getElementById('upload');
input.addEventListener('change', function (e) {
const files = e.target.files; // FileList
if (files.length === 0) return;
console.log('选中了', files.length, '个文件');
Array.from(files).forEach(file => {
console.log(file.name, file.size, file.type);
});
});
注意：不要用 click 或 focus 替代 change
click 或 focus 事件无法判断是否真的选中了文件——用户可能点了输入框又取消选择，此时 files 仍是空的。只有 change 能准确反映“选择行为已完成”这一状态。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“Java免费学习笔记（深入）”；
进阶：实时响应（如拖拽前预览）可配合 dragover/drop
如果需要支持拖拽上传，可监听 dragover 和 drop 事件，从 event.dataTransfer.files 获取文件。但这属于“拖放”交互，不是表单原生的“选中”，需额外阻止默认行为并自行处理 UI 反馈。
兼容性与小技巧
change 事件在所有现代浏览器及 IE10+ 中完全支持；
- 若想清空已选文件（例如重置表单），可直接设
input.value = ''； - 注意：重复选择同一个文件时，
change仍会触发（除非手动清空后再选）； - 移动端同样适用，iOS/Android 的文件选择器也会正确触发
change。
