JS如何上传文件？FileReader与FormData使用教程

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JS如何处理文件上传？FileReader与FormData详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

在网页开发中，使用FileReader和FormData可实现灵活的文件处理。1. FileReader用于前端读取文件内容，适合图片预览、文本读取及内容校验，但不适用于大文件；2. FormData用于构建上传数据，支持多文件和附加参数，并可配合fetch或XMLHttpRequest发送请求；3. 两者结合可用于先预览再上传的场景，如图片压缩、裁剪，同时支持上传前的文件类型与大小限制以及分片上传优化大文件处理。

在网页开发中，使用 HTML 和 JavaScript 实现文件上传是一个常见需求。除了传统的表单提交方式外，我们还可以借助 FileReader 和 FormData 对象来实现更灵活、异步的文件处理。下面我们就来看看它们各自的作用和用法。

1. 使用 FileReader 读取文件内容

FileReader 是浏览器提供的一个 API，用于在客户端读取用户选择的文件内容。它不会将文件发送到服务器，而是将文件内容加载到内存中，方便我们在前端预览或进行其他处理。

常见用途：

• 图片预览
• 文本文件内容读取
• 文件内容校验（比如检查 JSON 格式）

示例代码：

<input type="file" id="fileInput">
<img id="preview" style="max-width: 300px;">

<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = function(e) {
      // 显示图片预览
      document.getElementById('preview').src = e.target.result;
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  });
</script>

关键点说明：

• readAsDataURL：读取为 Base64 编码字符串，适合图片等小文件
• readAsText：读取为文本内容
• onload 回调中获取读取结果
• 不适用于大文件，容易造成内存问题

2. 使用 FormData 构建上传数据

如果你需要将文件上传到服务器，FormData 是更好的选择。它可以模拟表单数据，并支持多文件、附加参数等操作，常与 fetch 或 XMLHttpRequest 搭配使用。

示例代码（配合 fetch）：

const fileInput = document.getElementById('fileInput');
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

注意事项：

• 后端接口必须能接收 multipart/form-data 格式的数据
• 可以一次添加多个字段，例如 formData.append('username', 'test')
• 不需要手动设置请求头中的 Content-Type，浏览器会自动识别

3. 结合 FileReader 与 FormData 的实际场景

有时候我们会先使用 FileReader 预览或处理文件内容，再决定是否上传。这种组合非常实用，比如在上传前对图片进行压缩或裁剪。

示例流程：

• 用户选择图片
• 用 FileReader 加载并显示预览
• 用户确认后，将文件加入 FormData 并上传

小技巧：

• 在上传前可以限制文件类型和大小
• 可以用 canvas 对图片进行缩放后再上传
• 大文件建议分片上传（涉及更复杂的逻辑）

基本上就这些。这两个对象虽然简单，但在处理文件上传时非常实用。只要理解了它们各自的用途和限制，就能灵活应对各种文件操作场景。

本篇关于《JS如何上传文件？FileReader与FormData使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！