--- title: "文件输入" description: "FileInput 收集选择、拖放或粘贴的文件，按类型、数量与大小校验，渲染可移除的文件列表，并随表单提交；上传到服务器由你的应用负责。" --- > Documentation Index > Fetch the complete documentation index at: https://ui-sdk.ndjp.net/llms.txt > Use this file to discover all available pages before exploring further. # 文件输入 `FileInput`（文件输入）保存人们选择、拖放或粘贴的文件，按你的规则校验它们，并随表单一起提交。它只负责收集与校验，把文件上传到服务器是你应用的事。部件无样式，你用 `data-slot` 与状态属性自行外观；需要把选中的图片裁成头像时配合[图片裁剪](https://ui-sdk.ndjp.net/docs/components/image-cropper)。 ## 组合 ```text FileInput ├── FileInputTrigger ├── FileInputDropzone └── FileInputList └── FileInputItem └── FileInputItemRemove ``` `FileInputTrigger` 打开系统文件选择器。`FileInputDropzone` 接收拖放到它上面、或焦点在它内部时粘贴的文件；请在旁边保留一个触发器，方便键盘用户。`FileInputList` 为每个文件渲染一次它的子项，子项状态里有 `file` 与 `index`；`FileInputItemRemove` 移除所在项的文件。 ## 用法 ```tsx import { FileInput, FileInputDropzone, FileInputItem, FileInputItemRemove, FileInputList, FileInputTrigger, formatFileSize, } from "@ui-sdk/react/file-input"; function Example() { return (

把文件拖到这里

浏览文件 {({ file }) => ( <> {file.name} {formatFileSize(file.size)} )} ); } ``` `formatFileSize` 把字节数格式化成可读大小。根、拖放区与列表项都接受函数作为子内容，收到该部件的状态。 ## 校验：类型、数量与大小 `accept` 接受 MIME 类型、通配符与扩展名（如 `"image/*"`、`".pdf"`），对选择器、拖放与粘贴一律生效；扩展名按文件名匹配，即便系统报告了意外的 MIME 类型。`maxFiles` 限制总数（含已持有的文件），`minSize` / `maxSize` 限制每个文件的字节数。被拒的文件绝不进入值，`onReject` 收到每个被拒文件及其 `reasons`： ```tsx setRejected(rejected)} /> ``` 内置原因为 `file-type`、`file-too-large`、`file-too-small`、`too-many-files`。再加 `validate` 做自定义检查：返回原因字符串（如 `"duplicate"`）即拒绝，返回 `null` 即接受；它在内置类型与大小检查之后运行，原因同样进入 `onReject`。服务器端也要再校验一次。 ## 拖放、粘贴与整页接收 拖放区在拖入时暴露 `data-dragging`，并按浏览器在放下前给出的文件信息暴露 `data-drag-accept` 或 `data-drag-reject`。`pasteTarget` 让它额外从别处接收粘贴的文件（`"document"`、元素、CSS 选择器或返回元素的函数，如消息文本框），文本粘贴保持原样： ```tsx const message = React.useRef(null); message.current}> {({ file }) => file.name}