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

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

WBOY

发布： 2025-06-24 18:05:01

原创

941人浏览过

在网页开发中，使用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">
@@##@@

<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));

登录后复制