22. 文件上传预览：图片、大小与类型校验

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

选择图片

三、知识点提醒

File API 可以读取文件名、大小、类型等信息。
预览图片可用 `URL.createObjectURL(file)`。
不再需要预览地址时可以 `URL.revokeObjectURL()` 释放资源。

四、练习建议

增加多图上传预览。
限制图片宽高，例如宽度至少 1200px。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/22-file-upload-preview.js，下面同步展示，方便学习和复制。

// 页面 22：文件上传预览与校验
const fileInput = document.querySelector('#p22-file');
const preview = document.querySelector('#p22-preview');
const MAX_SIZE = 1024 * 1024 * 2; // 2MB
let objectUrl = null;

function clearObjectUrl() {
  if (objectUrl) {
    URL.revokeObjectURL(objectUrl);
    objectUrl = null;
  }
}

function validateFile(file) {
  if (!file) return '请选择文件';
  if (!file.type.startsWith('image/')) return '只能上传图片文件';
  if (file.size > MAX_SIZE) return '图片不能超过 2MB';
  return '';
}

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const error = validateFile(file);
  clearObjectUrl();

  if (error) {
    preview.textContent = error;
    return;
  }

  objectUrl = URL.createObjectURL(file);
  preview.innerHTML = `
    <p>文件名：${file.name}</p>
    <p>大小：${(file.size / 1024).toFixed(1)} KB</p>
    <img src="${objectUrl}" alt="预览图" style="max-width:100%; border-radius:12px; border:1px solid #e5e7eb;">
  `;
});