精选最新
文件上传Basic Dropzone
A dashed drop area with a real file input that stays reachable by keyboard and screen reader.
#upload#dropzone#drag-and-drop
3 个框架初级
Loading…
A file input that validates type, size and count on pick and splits results into accepted and rejected.
<!--
Resting state - the accepted/rejected lists are computed from a FileList on
pick, so they live in the React/TS tabs. The rules themselves are stated up
front in the hint, not sprung on the user only when a file bounces.
-->
<div class="w-full max-w-md">
<div class="rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 px-4 py-6 text-center focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-offset-2 focus-within:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:focus-within:ring-blue-400 dark:focus-within:ring-offset-gray-950">
<input id="validate-input" type="file" accept="image/*,.pdf" multiple aria-describedby="validate-hint" class="sr-only" />
<label for="validate-input" class="inline-block cursor-pointer text-sm font-semibold text-blue-700 underline underline-offset-2 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
Choose files
</label>
<p id="validate-hint" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
image/*, .pdf · up to 5 MB · max 4 files
</p>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
accept | string | 'image/*,.pdf' | Accept |
maxSizeMb | number | 5 | Max size mb |
maxFiles | number | 4 | Max files |
onFiles | (files: File[]) => void | - | On files |
className | string | - | 合并到根元素上的额外类名。 |
The rules are stated up front in the hint, not sprung only on failure; each rejected file carries the reason it bounced (wrong type, too large, over the limit). Accept tokens support `type/*`, exact MIME and `.ext` forms, and only the passing files reach `onFiles`.