最直接可靠的判断依据是 input.files.length === 0 表示未选文件，> 0 表示至少选中一个；不可依赖 value 为空或 change 事件触发即认定已选择，因取消操作也会触发 change。
用 input.files.length 判断是否选中文件
用户点击 <input type="file"> 后没选任何文件，files 是一个空的 FileList 对象，长度为 0。这是最直接、最可靠的前端判断依据。
-
document.getElementById("fileInput").files.length === 0表示未选择文件 -
document.getElementById("fileInput").files.length > 0表示至少选中一个文件（注意：多选时可能 >1） - 不要用
.value === ""—— 在某些浏览器（如 Safari）中，即使选了文件，.value也可能被截断或为空字符串，不可靠 - 不要监听
change事件后立刻读.files[0]就认为“一定有文件”——用户可能取消选择或清空输入框，需每次取值时重新检查.length
为什么不能只靠 change 事件触发就认为“已选择”
change 事件在用户打开文件对话框并关闭（无论是否选中）时都会触发，包括点“取消”或直接关闭窗口。此时 input.files 仍为空，但事件已发出。
- 常见错误：在
change回调里直接if (file) { ... }，却没检查file是否为undefined或input.files.length - 正确做法：始终先确认
input.files.length > 0，再取input.files[0] - 若需支持取消后再次触发，可加防抖或重置状态逻辑，但基础校验不能省
上传完成 ≠ 选择完成：别混淆两个阶段
“选择完成”指用户在本地文件系统中完成选取操作；“上传完成”是文件发到服务器并收到响应。两者完全独立，前端检测时机和手段也不同。
- 选择完成：靠
input.files.length，同步、瞬时、无网络依赖 - 上传完成：需监听
XMLHttpRequest.upload.onload或fetch().then()，异步、依赖网络与服务端响应 - 常见误判：把表单提交成功当成“选择完成”，结果用户点了提交但根本没选文件，后端报
http.ErrMissingFile或 PHP 的$_FILES['x']['error'] === 4 - 建议：提交前强制校验
files.length，避免无效请求
兼容性与边界情况要注意
现代浏览器对 FileList 支持良好，但仍有几个细节容易出错：
- 移动端 WebView（尤其旧版 Android）可能不触发
change，可用click+input.hidden模拟，但校验逻辑不变 - 用户选中文件后又手动清空
input（如通过 JS 赋值""），files.length会立即变为 0，无需额外监听 - 使用
multiple属性时，.files.length才有意义；单文件场景下也推荐统一用.length，而非只查[0] - 不要依赖
input.value的路径字符串做安全判断——它不可信、不跨平台、且被浏览器刻意模糊处理（如显示C:\fakepath\xxx）
.length 这一层，就会让“未选择文件”悄悄流入后续流程——尤其是当上传逻辑封装成函数或组件时，这个检查很容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
