<input type="file"> 用于原生文件选择，需配合 <label> 扩展点击区域；通过 accept 和 multiple 限制类型与数量；用 FileReader 异步读取内容，须监听 load 事件；注意 IE/Safari 兼容性及取消选择后 files.length 不变的问题。
用 <input type="file"> 实现基础文件选择
HTML 原生支持文件选择，核心就是 <input type="file">。它不上传文件，只触发本地选择动作，后续需配合 JavaScript 或表单提交才能真正上传。
常见错误是直接写 <input type="file"> 后发现点击没反应——其实它默认有样式且按钮区域极小，常被忽略。建议加 id 配合 <label> 扩展可点击范围：
<label for="upload">选择文件</label> <input type="file" id="upload" style="display: none;">
这样点“选择文件”文字就能唤起系统文件对话框。
限制文件类型和数量：用 accept 和 multiple
accept 控制用户能看见哪些文件（仅前端过滤，不替代后端校验），multiple 允许选多个文件。
立即学习“前端免费学习笔记（深入）”；
-
accept="image/*"显示所有图片（但 Safari 对通配符支持弱，建议明确写accept="image/jpeg,image/png"） -
accept=".pdf,.docx"按扩展名过滤（注意开头的点不能省） - 加
multiple后，input.files返回FileList而非单个File，遍历时需用循环
注意：accept 在移动端行为不一致（比如 Android Chrome 可能忽略 MIME 类型只认扩展名），别依赖它做唯一过滤。
读取文件内容：用 FileReader 预览或校验
选完文件后，若要预览图片、读取文本内容或检查文件大小，得用 FileReader。它异步读取，不能直接 return 结果。
典型误操作是写同步逻辑，比如：
const file = input.files[0]; const content = reader.readAsText(file); // ❌ 错！readAsText 没返回值
正确做法是监听 load 事件：
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // 文件内容在这里
};
reader.readAsText(file); // ✅ 此时才开始读
大文件读取耗时长，建议先用 file.size 做快速拦截（如限制 ≤10MB），避免卡死 UI。
兼容性与隐藏坑：IE、Safari 和空选择处理
IE10+ 支持 FileList，但 IE 不支持 FileReader.readAsArrayBuffer；Safari 旧版本对 accept="video/*" 过滤不严格。这些差异必须在真实设备上验证。
另一个容易漏的点：用户点开文件选择框又取消，input.files 保持原值（不会变为空）。所以每次 change 事件里都应主动检查 input.files.length：
input.addEventListener('change', () => {
if (!input.files.length) return; // 用户取消了选择
// 处理文件...
});
如果需要重置状态（比如清空已选文件），不能用 input.value = ''（部分浏览器不生效），应克隆节点再替换：input.parentNode.replaceChild(input.cloneNode(true), input)。
