change事件是处理file输入的唯一可靠方式，因仅在用户选中或取消文件时触发；需检查files.length>0，用FileReader预览或FormData上传，并注意清空value以重选同名文件。

对于 input[type="file"]，change 事件是处理文件上传的首选且最可靠方式，因为只有用户真正选择（或取消）文件后它才会触发，避免了 focus/blur 等无关行为干扰。直接监听 change，拿到 files 对象即可开始后续操作（如预览、校验、上传）。

为什么不用 input 或 keyup？

input 事件在 file 类型上几乎不触发（浏览器限制），无法响应选中动作；keyup、click 更是完全无效。change 是唯一标准途径。

基础用法：获取并读取选中的文件

监听 change 后，通过 e.target.files 获取 FileList 对象，它是类数组，可用 [0] 取第一个文件：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

• 检查 files.length > 0 判断是否真有文件被选中（用户可能点了取消）
• 用 FileReader 读取内容（如预览图片）：
  <!-- 示例：显示图片预览 -->
  

  const reader = new FileReader();<br>
  reader.onload = e => { img.src = e.target.result; };<br>
  reader.readAsDataURL(files[0]);

• 若只需上传，可直接将 files[0] 传给 FormData：
  

  const fd = new FormData();<br>
  fd.append('file', files[0]);

注意多文件与清空状态

即使 multiple 未设置，files 仍是 FileList；若用户重复选择同一文件，change 不会再次触发——这是浏览器默认行为。如需强制触发（比如重选相同文件），可手动清空 input.value = ''，再绑定事件。

立即学习“Java免费学习笔记（深入）”；

常见校验建议（在 change 回调内做）

• 文件数量：if (files.length === 0) return;
• 类型限制：if (!['image/jpeg', 'image/png'].includes(files[0].type))
• 大小检查：if (files[0].size > 5 * 1024 * 1024) // 5MB
• 扩展名辅助判断（因 type 可伪造）：const ext = files[0].name.split('.').pop().toLowerCase();