精选最新
文件上传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 dropzone that lists each picked file with a simulated per-file progress bar and cancel control.
<!--
Resting state. The per-file progress bars and cancel buttons appear once files
are picked, which needs a FileList the markup cannot read - see the React/TS
tabs. The spine the markup owns: an sr-only input that keeps its tab stop and a
label that browses.
-->
<div class="w-full max-w-xl">
<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="multi-input" type="file" multiple class="sr-only" />
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">Add files to upload</p>
<label for="multi-input" class="mt-1 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">
or browse your computer
</label>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | 'Add files to upload' | 加载时朗读的无障碍标签。 |
accept | string | '' | Accept |
onFiles | (files: File[]) => void | - | On files |
className | string | - | 合并到根元素上的额外类名。 |
Progress is faked by one timer that advances every in-flight item - swap that effect for real XHR/fetch progress events and nothing else changes. The bar is `aria-hidden`; the percentage lives in the text so a screen reader hears it, and each row can be cancelled or removed.