JavaScript Academy · 课时

将文件拖入页面

Q: 「将文件拖入页面」这节课中我会学到什么？

处理从桌面拖放进来的文件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

处理从桌面拖放进来的文件。

第 4 / 4 课13 个步骤

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

来自桌面的文件

除了移动元素，拖放接口还允许用户将操作系统中的文件拖入您的页面，这是上传放置区域的基础。

接受文件放置

其设置方式与元素放置相似：在 dragover 和 drop 上阻止默认行为。不同之处在于，这里读取的是文件，而不是使用 getData。

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

放置时，e.dataTransfer.files 是一个由被放置的 File 对象组成的 FileList。

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

遍历文件

FileList 类似数组。您可以使用展开运算符将其转换，然后使用数组方法进行遍历。

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

文件元数据

每个 File 都会提供 name、size（字节数）、type（MIME）和 lastModified，无需读取文件内容。

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

按类型筛选

在处理之前验证被放置的文件，例如只接受图像文件。

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

读取文件内容

使用 FileReader 读取文件。文本使用 readAsText，预览使用 readAsDataURL。

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

预览被放置的图像

URL.createObjectURL(file) 可以立即生成预览网址，无需读取整个文件。使用完毕后请撤销该网址，以释放内存。

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

数据项与文件

dataTransfer.items 比 files 包含的信息更丰富：每个 DataTransferItem 会报告 kind（"file" 或 "string"），并且可以生成文件或目录条目。

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

上传被放置的文件

将文件封装到 FormData 中，然后通过 POST 将其发送到服务器。

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

防止意外导航

如果文件被放置在区域之外，浏览器会导航到该文件。请在整个文档上设置防护来阻止这种行为。

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

快速检查

测试文件放置。

在交互式课程中回答

回顾：拖入文件

您创建了文件放置区域，读取了 dataTransfer.files，检查了元数据，按类型筛选了文件，使用对象网址预览了图像，使用了 FileReader，通过 FormData 上传了文件，并阻止了意外导航。拖放内容到此完成。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 59
课程: 200

免费开始学习查看完整课程

常见问题解答

「将文件拖入页面」课时是免费的吗？

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

「将文件拖入页面」这节课中我会学到什么？

处理从桌面拖放进来的文件。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「将文件拖入页面」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy