React Academy · 课时

拖放文件上传界面

Q: 「拖放文件上传界面」这节课中我会学到什么？

使用 onDragOver/onDrop 事件和视觉反馈构建拖放区域。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 onDragOver/onDrop 事件和视觉反馈构建拖放区域。

拖放文件上传界面 是 CoddyKit 上的免费 React Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用原生拖拽事件和视觉反馈，在 React 中构建一个拖放文件上传区域，以引导用户完成操作。

拖拽事件概览

当文件被拖过元素时，浏览器会触发拖拽事件。主要事件包括：`dragover`（文件位于元素上方）、`dragleave`（文件离开元素）以及 `drop`（释放文件）。

阻止默认行为

默认情况下，将文件拖放到浏览器中会导航到该文件。请在 `onDragOver` 和 `onDrop` 中调用 `e.preventDefault()` 来阻止此行为。

const handleDragOver = (e) => {
  e.preventDefault();
};
const handleDrop = (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  // process files
};

视觉活动状态

使用布尔状态跟踪文件是否正被拖过该区域。切换一个 CSS 类，为用户提供视觉反馈（例如高亮边框）。

const [isDragging, setIsDragging] = useState(false);

<div
  className={isDragging ? 'zone active' : 'zone'}
  onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
  onDragLeave={() => setIsDragging(false)}
  onDrop={handleDrop}
>

读取拖放的文件

拖放的文件位于 `e.dataTransfer.files` 中，这是一个 FileList。请将其转换为数组，然后处理这些文件。

const handleDrop = (e) => {
  e.preventDefault();
  setIsDragging(false);
  const files = Array.from(e.dataTransfer.files);
  setSelectedFiles(files);
};

结合点击浏览

通过渲染一个隐藏的文件输入框，并在用户点击区域时以编程方式触发该输入框，使拖放区域也可以点击。

const inputRef = useRef();

<div onClick={() => inputRef.current.click()} ...>
  Drop files here or click to browse
</div>
<input
  ref={inputRef}
  type="file"
  multiple
  hidden
  onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
/>

显示文件预览

遍历选中的文件，显示其名称和大小。对于图像文件，请使用 URL.createObjectURL 生成预览 URL，并在清理副作用中撤销这些 URL。

上传前移除文件

允许用户在上传前通过 filter 选中的文件数组来移除文件。使用筛选后的数组更新状态。

const removeFile = (index) =>
  setSelectedFiles(files => files.filter((_, i) => i !== index));

首次拖入与持续悬停

使用 `dragenter` 检测拖拽首次进入区域，使用 `dragover` 在悬停期间保持活动状态。对于嵌套子元素，请使用计数器：在 `dragenter` 时递增，在 `dragleave` 时递减，并在放置时重置。

第三方库

对于生产环境中的拖放区域，可以考虑使用 **react-dropzone**——它开箱即用地处理浏览器差异、ARIA 属性、文件类型筛选和多种上传模式。

import { useDropzone } from 'react-dropzone';
const { getRootProps, getInputProps, isDragActive } = useDropzone({
  onDrop: acceptedFiles => setFiles(acceptedFiles),
  accept: { 'image/*': [] },
});

快速检查

为什么必须在 `onDragOver` 处理程序中调用 e.preventDefault()？

回顾

使用 onDragOver、onDragLeave 和 onDrop 事件构建拖放区域。在拖动经过和放置时，始终调用 e.preventDefault()。跟踪 isDragging 状态以提供视觉反馈。结合隐藏的文件输入框实现点击浏览。

接下来

下一课：**将文件上传到后端 API**——您将使用 FormData 和 fetch 将文件 POST 到服务器，并跟踪上传进度。

常见问题解答

「拖放文件上传界面」课时是免费的吗？

是的 — 「拖放文件上传界面」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「拖放文件上传界面」这节课中我会学到什么？

使用 onDragOver/onDrop 事件和视觉反馈构建拖放区域。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「拖放文件上传界面」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy