当前位置：首页 > 文章列表 > 文章 > 前端 > JS如何上传文件？FileReader与FormData使用教程

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

2025-06-24 21:10:21 0浏览收藏

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

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

HTML中JS怎么处理文件上传？FileReader与FormData对象教程

在网页开发中，使用 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));