文件上传区
File Upload
别名:拖文件进去上传拖拽上传框选文件的地方dropzone
这是什么
用于选择文件、展示校验反馈并管理待处理文件列表的表单区域。常见形式为原生文件选择按钮或可拖放区域；拖拽必须有按钮选择作为替代。选择文件不代表已经上传，界面应清楚区分待上传、处理中、成功和失败，并说明允许的格式与大小。
交互实验室
试一试，再决定怎么用选择或拖入 PNG、JPG、PDF，再尝试不支持的文件类型，并移除已选文件。
正在加载实验室…
使用时关注什么
- 01文件选择与拖放采用相同限制，拒绝时不丢失已选文件。
- 02选择成功不能显示为上传成功；这里没有上传请求。
✓ 适用场景
- 提交图片、附件、PDF 等用户文件。
- 多文件任务需要逐项查看和移除。
✕ 不适用场景
- 只需要一个网址时使用文本输入。
- 未明确数据用途或上传目标时不要自动上传。
常见形式
拖放区域
Drop zone
同时提供拖放与文件选择入口。
按钮选择
Picker button
空间紧凑时使用原生文件选择。
实现要点
border-style: dashed:focus-visibleoverflow: hidden保留原生 input type="file"，accept 只是筛选提示，还需校验类型与大小；服务端也必须验证上传内容。拖放阻止浏览器默认打开文件，错误明确到限制条件。示例不联网，只展示选择结果。