附加组件

文件拖放上传区

File upload dropzone

拖放区 + 上传中的文件行

实时预览

提示词正文

Build a file upload dropzone with Tailwind CSS: a dashed-border drop area that highlights on dragover and opens a file picker on click, listing accepted types and a size limit; below it, a list of selected files as rows with a file-type icon, name, size, a determinate progress bar per file, and a remove button. Handle upload success (green check), failure (red retry action), and duplicate-name conflicts inline, and support keyboard-only upload through a visually-hidden but focusable input.

提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。

怎么用

虚线拖放区 dragover 高亮;文件行带独立进度条;成功/失败/重名内联处理;键盘可上传。

同类提示词 · 附加组件

© 2026 Genisource Vibe · 提示词详情