FORM & INPUT
拖拽上传区Dropzone
一圈虚线框住的上传区，拖文件悬停时整块变色——"放这儿就行"的直觉设计。
效果预览
↑
拖文件到此处上传
或 点击选择文件
支持 PNG / JPG / PDF，单文件 ≤ 10MB
适合用在哪
头像上传、附件上传、批量导入、设计稿交付。
容易踩的坑
- 只支持拖拽没有可聚焦的「点击上传」入口，键盘用户和手机用户无法上传。
- 文件超限或格式不符只在上传完成后才报错，白白浪费用户几分钟等待。
- dragleave 在经过子元素时误触发，高亮状态来回闪烁。
设计提示词 · Prompt
拖拽上传区（Dropzone）：2px 虚线描边（dashed）+ 大圆角（12-16px）+ 极浅灰底，内部居中：圆形图标容器（48-56px、品牌浅底品牌色图标）→ "拖文件到此处"主文案 → "或 点击上传"带下划线的品牌色链接 → 9-10px 灰色格式说明（"支持 PNG/JPG，单文件 ≤10MB"）。dragover 时整块变品牌浅底 + 虚线变实线品牌色 + 图标弹跳。上传中逐文件显示进度条，完成后变成文件行（图标 + 名称 + 大小 + 删除）。
Dropzone: 2px dashed border + large border radius (12-16px) + very light gray background, with centered content inside: circular icon container (48-56px, light brand background with brand-color icon) → main text "Drag files here" → an underlined brand-color link "or click to upload" → 9-10px gray format note ("PNG/JPG supported, ≤10MB per file"). On dragover the whole area turns light brand background + the dashed border becomes a solid brand-color line + the icon bounces. During upload show a progress bar per file; when done it becomes a file row (icon + name + size + delete).
常见搭配
同一页面里经常和「拖拽上传区」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:14px 0">
<div class="d-drop">
<span class="d-drop__ic">↑</span>
<b>拖文件到此处上传</b>
<span>或 <u>点击选择文件</u></span>
<span>支持 PNG / JPG / PDF，单文件 ≤ 10MB</span>
</div>
</div>