File/Blob 与对象 URL

Blob（二进制大对象，不可变的原始数据）
 └── File（Blob 的子类，多了 name、lastModified 等元信息）
      └── FileList（input.files 或 dataTransfer.files 返回的集合）

<input type="file" id="picker" accept="image/*" multiple />
<script>
  // 入口一：文件选择框
  const input = document.getElementById('picker');
  input.addEventListener('change', () => {
    console.log(input.files);        // FileList（类数组）
    const first = input.files[0];    // File 对象
    console.log(first.name, first.size, first.type, first.lastModified);
  });

  // 入口二：拖拽（详见 250-DragAPI）
  document.addEventListener('drop', (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files; // 同样的 FileList
  });

  // 入口三：接口返回（fetch 的 blob() 直接产出 Blob 而不是 File）
  fetch('/api/report')
    .then((res) => res.blob())
    .then((blob) => console.log(blob.size, blob.type));
</script>

// 路一：FileReader（事件式，老牌 API，功能最全）
const reader = new FileReader();
reader.onload = (e) => console.log(e.target.result); // 读取结果在 e.target.result
reader.onerror = () => console.error('读取失败');
reader.readAsDataURL(file); // 其他方法：readAsText / readAsArrayBuffer / abort()

// 路二：Promise 化的便捷方法（现代浏览器，读文本与 Buffer 的首选）
const text = await file.text();          // 等价 readAsText，一行搞定
const buffer = await file.arrayBuffer(); // 等价 readAsArrayBuffer

// 路三：只想要一个预览 URL 时，根本不用读内容
const url = URL.createObjectURL(file);   // 指向文件内存块的临时 URL
img.src = url;

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

// 1. URL 与页面同生命周期：不手动 revoke 就一直占着内存
// 2. 页面卸载时才自动释放；SPA 里组件卸载不会释放——必须手动
// 3. revoke 之后 url 立即失效，再加载会报错

img.onload = () => URL.revokeObjectURL(url); // 加载完成后立刻归还内存——标准时机

// canvas 来自 235-Canvas2DDrawing 的绘制结果
canvas.toBlob((blob) => {
  if (!blob) return alert('导出失败');
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'island-poster.png';   // download 属性让浏览器下载而非导航
  a.click();
  URL.revokeObjectURL(url);           // 下载已被浏览器接管，可立即归还
}, 'image/png');

<div id="dropzone" style="border:2px dashed #999; padding:40px">把图片拖到这里</div>
<script>
  const zone = document.getElementById('dropzone');

  zone.addEventListener('dragover', (e) => {
    e.preventDefault(); // 不拦下默认行为，drop 不会触发
  });

  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (!file || !file.type.startsWith('image/')) {
      zone.textContent = '请拖入图片文件';
      return;
    }
    const url = URL.createObjectURL(file);
    zone.innerHTML = '';
    const img = new Image();
    img.src = url;
    img.onload = () => URL.revokeObjectURL(url); // 渲染完成后释放
    zone.appendChild(img);
    // 拿到 File 后直接可上传：FormData.append('avatar', file)，见 246 的表单上传
  });
</script>

function exportCSV(rows, filename) {
  // rows: [{name, score}, ...]
  const header = 'name,score';
  const body = rows.map((r) => `${r.name},${r.score}`).join('\n');
  // \uFEFF BOM 头：让 Excel 识别 UTF-8，否则中文乱码
  const blob = new Blob(['\uFEFF' + header + '\n' + body], { type: 'text/csv;charset=utf-8' });

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

exportCSV(
  [{ name: '林岛民', score: 96 }, { name: '赵读者', score: 88 }],
  '阅读成绩.csv',
);