这叫啥 UI？
← 返回组件目录

COMPONENT 28 · Text & File Inputs

文件上传 / 拖放区

File Upload / Drop Zone

也叫File PickerDrop ZoneUploader文件选择

通过文件选择器或拖放接收本地文件。

Accepts local files through a file picker or drag-and-drop target.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 选择按钮或拖放区
  • 格式大小说明
  • 文件列表与状态

适合使用

  • 用户需要附加图片、文档或其他本地文件时。

不建议使用

  • 内容可直接粘贴或通过已有云端资源选择时。

键盘与无障碍

  • 拖放之外必须提供键盘可用的文件输入；显示文件限制、错误与上传状态。

DESCRIBE IT TO AI

这样告诉编程助手

实现文件上传 / 拖放区（File Upload / Drop Zone）：通过文件选择器或拖放接收本地文件。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo stack">
  <label class="drop-zone" for="file">
    <strong>拖放文件，或点击选择</strong>
    <input id="file" type="file" aria-describedby="file-status">
  </label>
  <p id="file-status" class="muted" role="status">尚未选择文件；示例不会上传。</p>
</div>