accept属性仅优化文件选择界面，无法真正限制上传；必须配合前端JS校验（扩展名+大小）与后端魔数校验（如file-type、finfo_file），且表单需设enctype="multipart/form-data"。
仅靠 accept 属性无法真正限制上传，它只影响文件选择对话框的默认筛选视图，用户点“所有文件”就能绕过。必须配合前端 JS 校验 + 后端真实类型校验，三者缺一不可。
用 accept 属性让对话框默认只显示 Excel 文件
这是最基础的体验优化，能让大部分用户第一眼就看到目标格式：
-
accept=".xls,.xlsx,.csv"：按扩展名匹配，兼容性最好，但不防改后缀 -
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"：用标准 MIME 类型，更准确，但部分 Windows 系统或旧浏览器可能识别不准 - 推荐写法：
accept=".xls,.xlsx,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"—— 扩展名 + MIME 并存，兼顾兼容与准确性 - 移动端 Safari 对 MIME 支持弱，不写扩展名大概率失效
用 JS 在上传前检查文件名和大小
input.files[0].type 不可靠（常为空或被浏览器误判），得靠文件名后缀 + size 做即时反馈：
- 取后缀更稳：
file.name.split('.').pop().toLowerCase()，判断是否为xls、xlsx或csv - 检查大小：
if (file.size > 10 * 1024 * 1024)（例如限制 10MB），单位是字节 - 别只监听
change，拖拽上传时input.files可能为空，建议在beforeupload（如 Element UI）或提交前统一校验 - 错误提示后清空 input：
input.value = ''，否则重复选同名文件可能触发不了change事件
后端必须用魔数（magic bytes）校验真实类型
用户把 evil.exe 改成 data.xlsx 就能绕过所有前端检查。后端不能信 Content-Type 或文件后缀：
- PHP：用
finfo_open(FILEINFO_RAW)读文件头，或finfo_file($finfo, $tmpFile) - Node.js：用
file-type包解析 buffer 前 12 字节，比req.file.mimetype可靠得多 - Java（Spring）：禁用
MultipartFile.getContentType()，改用Files.probeContentType(path)或 Apache Tika - Python：避免依赖
filename.endswith('.xlsx')，用python-magic检查魔数
最容易被忽略的是：form 表单漏写 enctype="multipart/form-data"，会导致后端根本收不到文件字段——req.files 为空，错误还不报，调试时容易卡在前端以为是 JS 问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
