最稳妥方案是用<label>包裹<input type="file">并用position: absolute; left: -9999px隐藏input；禁用display: none；推荐隐式绑定（input为label直接子元素）；需JS监听change事件更新UI，并注意移动端和可访问性细节。
用 <label> 包裹 <input type="file"> 实现无按钮的卡片区域
卡片式上传区本质是隐藏原生文件输入框，用样式化的 <label> 触发它。关键在于：必须让 <input type="file"> 与 <label> 正确关联，否则点击卡片不会弹出选择对话框。
常见错误是把 <input> 放在 <label> 外部、或漏掉 for 属性和对应 id。正确做法是：
-
<input type="file" id="upload-input" style="display: none">（绝对不要用visibility: hidden或opacity: 0，部分浏览器会禁用交互） -
<label for="upload-input">拖拽或点击上传</label>，且for值与input的id严格一致 - 给
<label>加卡片样式（如border: 2px dashed #ccc、padding: 40px、text-align: center）
支持拖拽上传需要监听 dragover 和 drop 事件
纯点击上传靠 <label> 就够了；但要实现“拖拽到卡片上松开即上传”，必须用 JS 拦截原生拖放行为，并读取 event.dataTransfer.files。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 不阻止
dragover默认行为 → 浏览器会显示“禁止”图标，拖拽无效 - 只监听
drop却没监听dragenter/dragleave→ 无法做悬停高亮反馈 - 直接把
FileList赋给<input>的files属性 → 不可行，该属性只读
实操建议：监听 drop 后，用 new FormData() 手动构造上传数据，再通过 fetch 或 XMLHttpRequest 发送。
accept 和 multiple 属性决定能选什么文件
这两个属性写在 <input type="file"> 上，直接影响用户可选范围和上传逻辑：
-
accept="image/*"限制只显示图片类文件（但不能替代后端校验） -
accept=".pdf,.docx"指定扩展名，注意逗号前后不能有空格 -
multiple缺省时只能选一个文件；加了之后用户可按住 Ctrl/Meta 多选，或拖入多个文件 - 如果启用了
multiple，JS 中需遍历event.target.files而非只取[0]
注意：iOS Safari 对 accept 支持较弱，比如 accept="image/*" 在某些版本里仍会显示所有文件类型。
样式兼容性与可访问性不能只靠视觉
卡片区域看起来像按钮，但它不是语义化按钮。如果仅用 <div> + JS 绑定 click，屏幕阅读器无法识别，键盘用户按 Enter 也无法触发。
安全做法是保留 <label> 关联，同时确保：
-
<label>有明确文字（避免纯图标），或用aria-label补充说明 - 卡片区域支持
:focus-visible样式，键盘 tab 到它时有清晰焦点环 - 禁用状态（如上传中）用
disabled控制<input>，而非仅 CSS 灰掉<label>（否则仍可点击）
真正麻烦的是大文件上传时的 UI 反馈——进度条、取消按钮、错误重试，这些都得自己补全，原生 <input type="file"> 一概不提供。
