File upload 文件上传
/FYLE UP-lohd/ · noun · 输入类模式 · #121
表单里添加文件的部分：一个虚线边框的框（拖拽区，英文叫 dropzone），可以把文件拖进去，也可以点击打开文件选择窗口；下面列出已选的文件，每个都有文件名、大小、上传中的进度条和删除按钮。在手机上，同样的控件会打开照片或文件选择器。
别名：拖拽上传、上传组件。
你可能会这样叫它
- “把文件拖进去的框”
- “拖拽上传区域”
- “虚线框的上传区”
- ““选择文件”按钮”
- “拖到这里上传的地方”
……它的名字是 文件上传（File upload）。
常见问题
拖拽上传是什么意思？
拖拽上传就是用鼠标把电脑里的文件拖到网页上的某个区域（通常是带虚线边框的框，英文叫 dropzone），松手就开始上传，不用点“选择文件”一层层找。好的上传组件两种方式都支持，并逐个显示文件名、大小和上传进度。
代码里叫什么
| Web (HTML) | <input type="file"> accept multiple |
|---|---|
| Web (drag and drop) | dragover drop DataTransfer.files |
| React | react-dropzone useDropzone |
| Ant Design | Upload Upload.Dragger |
| SwiftUI + PhotosUI | .fileImporter .dropDestination PhotosPicker |
| Android | ActivityResultContracts.OpenDocument PickVisualMedia |
复制给 AI 编程工具
给这个表单加一个文件上传区：虚线边框的拖拽区写着“将文件拖到此处，或点击选择”，文件拖到上方时高亮，点击、按 Enter 或空格时打开文件选择窗口。事先写明允许的格式和大小上限，并用 accept 限制类型。逐个列出文件，显示文件名、大小、进度条和删除按钮；上传失败的文件旁边直接写出原因。背后保留一个真正的 <input type="file">，让只用键盘和读屏软件的人也能上传。