17370845950

JavaScript 文件上传核心是用 input[type="file"] 获取 File 对象，再通过 FileReader 异步读取内容或生成图片预览；需校验类型大小，支持 readAsText、readAsDataURL、readAsArrayBuffer 等方法。

在 JavaScript 中处理文件上传，核心是利用 input[type="file"] 获取文件对象，再通过 FileReader 读取内容或生成预览。关键不是直接上传，而是先在前端完成读取、校验和预览，提升用户体验。

监听文件选择并获取文件对象

用户点击文件输入框选中文件后，change 事件的 event.target.files 会返回一个 FileList 对象（类似数组）。它包含 File 实例，每个都继承自 Blob，有 name、size、type 等属性。

• 只取第一个文件：const file = event.target.files[0];
• 检查是否选中：if (!file) return;
• 限制类型示例：if (!file.type.startsWith('image/')) alert('请上传图片');
• 限制大小示例：if (file.size > 5 * 1024 * 1024) alert('文件不能超过 5MB');

用 FileReader 读取文本或二进制内容

FileReader 是浏览器内置 API，用于异步读取文件内容。它不发送请求，纯前端操作，适合读取配置文件、日志、JSON 等文本类文件。

• 创建实例：const reader = new FileReader();
• 监听成功回调：reader.onload = () => { console.log(reader.result); };
• 开始读取文本：reader.readAsText(file, 'UTF-8');
• 读取为 base64（常用于小文件或需嵌入 HTML）：reader.readAsDataURL(file);
• 读取为 ArrayBuffer（适合处理音频、PDF 或自定义解析）：reader.readAsArrayBuffer(file);

快速预览图片（无需上传服务器）

对图片文件，最常用的是 readAsDataURL，将文件转为 data URL 后赋给 的 src 属性，实现即时预览。

• HTML 示例：
• JS 绑定：document.getElementById('fileInput').addEventListener('change', handleFile);
• 处理函数内：

  function handleFile(e) {
    const file = e.target.files[0];
    if (file && file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = () => {
        document.getElementById('preview').src = reader.result;
      };
      reader.readAsDataURL(file);
    }
  }

补充：多图预览与错误处理

若支持多选（multiple），遍历 files 即可；同时别忽略 onerror 和 onloadend，尤其大文件读取失败时能提示用户。

• 捕获读取错误：reader.onerror = () => console.error('读取失败:', reader.error);
• 多图循环预览：用 for (const file of e.target.files)，每次新建 FileReader
• 避免闭包陷阱：在循环中使用 let 声明变量，或把 reader 和 file 封装进立即执行函数

不复杂但容易忽略。重点是理解 File → FileReader → result 的链路，以及不同 readAsXxx 方法适用的场景。实际项目中，配合拖拽上传、进度条或压缩逻辑，体验会更完整。