98. 文件 API 与剪贴板

File API：读取用户文件

用户选了文件后，用 FileReader 读取内容。

读取为文本

const input = document.getElementById("fileInput");

input.addEventListener("change", function (e) {
  const file = e.target.files[0]; // File 对象
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function (e) {
    console.log("文件内容：", e.target.result);
  };
  reader.readAsText(file); // 读成字符串
});

读取为 Data URL（适合图片预览）

reader.readAsDataURL(file);
// result 是 base64 字符串，可直接放到 <img src="...">

常用读取方式

方法	用途
readAsText(file)	读成字符串
readAsDataURL(file)	读成 base64 Data URL
readAsArrayBuffer(file)	读成二进制缓冲
readAsBinaryString(file)	读成二进制字符串

实用示例：图片预览

<input type="file" id="imgInput" accept="image/*">
<img id="preview" style="max-width: 300px;">

<script>
  document.getElementById("imgInput").addEventListener("change", function (e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function (e) {
      document.getElementById("preview").src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
</script>

拖拽获取文件

前面拖放 API 里提到过，e.dataTransfer.files 可以拿到文件列表：

dropZone.addEventListener("drop", function (e) {
  e.preventDefault();
  const files = e.dataTransfer.files;
  for (const file of files) {
    console.log("文件名:", file.name, "大小:", file.size, "类型:", file.type);
  }
});

Clipboard API：剪贴板操作

复制文本

navigator.clipboard.writeText("要复制的文本").then(function () {
  console.log("复制成功");
});

读取剪贴板

navigator.clipboard.readText().then(function (text) {
  console.log("剪贴板内容:", text);
});

复制图片

async function copyImage(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  await navigator.clipboard.write([
    new ClipboardItem({ [blob.type]: blob })
  ]);
  console.log("图片已复制");
}

监听复制/粘贴事件

// 复制时修改内容
document.addEventListener("copy", function (e) {
  e.clipboardData.setData("text/plain", "复制的内容被改写了");
  e.preventDefault();
});

// 粘贴时获取内容
document.addEventListener("paste", function (e) {
  const text = e.clipboardData.getData("text/plain");
  console.log("粘贴了:", text);
});

Fullscreen API

让元素全屏显示：

// 进入全屏
document.documentElement.requestFullscreen();

// 退出全屏
document.exitFullscreen();

// 是否全屏
document.fullscreenElement;

实用例子：视频播放器全屏按钮。

Intersection Observer：元素可见性检测

判断元素是否出现在可视区域，常用于懒加载和滚动动画：

const observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      // 元素进入视口
      entry.target.classList.add("visible");
    } else {
      // 元素离开视口
      entry.target.classList.remove("visible");
    }
  });
});

// 观察多个元素
document.querySelectorAll(".lazy").forEach(function (el) {
  observer.observe(el);
});

更多实用 API 速览

API	用途
Notification	浏览器通知
Vibration	手机震动
Battery Status	电池状态（部分浏览器已废弃）
Network Information	网络类型和速度
Page Visibility	页面是否可见
Resize Observer	监听元素尺寸变化
Mutation Observer	监听 DOM 变化
matchMedia	检测媒体查询

总结

这一章介绍的都是浏览器提供的实用工具。它们不是某个大框架的一部分，而是原生能力。需要时查文档就能用。

记住核心思路：

• 操作文件 → File API + FileReader
• 剪贴板 → Clipboard API（需要 HTTPS）
• 元素可见性 → Intersection Observer
• 元素尺寸变化 → Resize Observer
• 全屏 → Fullscreen API