js进阶——FormData常用知识点介绍

FormData 是 JavaScript 中用于构建表单数据对象的 API，它主要用于处理 enctype="multipart/form-data" 类型的表单提交，即上传文件和数据。通过 FormData，开发者可以在客户端构建和发送表单数据，尤其是在没有使用传统的 HTML 表单提交时，允许开发者进行更多的自定义和控制。

FormData 的基础知识

1. 什么是 FormData

FormData 对象代表了一个表单的键值对集合，它可以包含多个字段，并且可以包含文件数据。FormData 通常用于通过 AJAX（XMLHttpRequest 或 Fetch）发送数据，避免页面刷新。

2. 如何创建 FormData 实例

可以通过两种方式创建 FormData 实例：

• 空表单数据：你可以通过 new FormData() 创建一个空的 FormData 对象，并手动填充数据。
• 基于现有表单元素：你可以通过 new FormData(formElement) 直接传递一个 HTML 表单元素，FormData 会从表单中提取所有的表单字段。

// 创建一个空的 FormData 对象
let formData = new FormData();

// 基于表单元素创建 FormData 对象
let formElement = document.querySelector('form');
let formDataFromForm = new FormData(formElement);

3. FormData 的常用方法

FormData 提供了一些方法来操作表单数据。

• append(name, value)：向 FormData 对象添加一个新的键值对。如果键名已存在，会在值后面追加。
• delete(name)：删除指定键的键值对。
• get(name)：获取指定键的值。
• has(name)：检查指定键是否存在。
• set(name, value)：如果键已存在，会用新值替换原值。
• forEach(callback)：遍历 FormData 对象中的所有键值对。

4. FormData 如何发送数据

FormData 通常通过 XMLHttpRequest 或 Fetch API 发送数据。常见的发送方式是通过 POST 请求。

4.1 使用 XMLHttpRequest

let xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('数据已提交');
  }
};
xhr.send(formData);

4.2 使用 Fetch API

fetch('/submit', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('数据已提交', data))
.catch(error => console.error('提交失败', error));

FormData 的实际应用

1. 提交表单数据和文件

使用 FormData 可以方便地提交表单数据以及文件。这在许多场景中都有广泛应用，例如上传用户头像、文件或其他数据。

<form id="myForm">
  <input type="text" name="username" />
  <input type="file" name="profilePic" />
  <button type="submit">提交</button>
</form>

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  let formData = new FormData(form);
  
  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('成功', data))
  .catch(error => console.error('失败', error));
});

2. 文件上传

FormData 在文件上传场景中尤其有用。你可以使用 input[type="file"] 获取文件，并通过 FormData 上传到服务器。

<form id="fileForm">
  <input type="file" id="fileInput" name="file" />
  <button type="submit">上传文件</button>
</form>

let form = document.getElementById('fileForm');
let fileInput = document.getElementById('fileInput');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  let formData = new FormData();
  formData.append('file', fileInput.files[0]);  // 将文件添加到 FormData

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('文件上传成功', data))
  .catch(error => console.error('上传失败', error));
});

3. FormData 的动态操作

FormData 允许你动态地添加、删除、修改表单数据，这使得它在一些需要动态处理的场景中非常有用。例如，用户可以选择上传多个文件，或根据不同条件选择是否添加其他数据字段。

let formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);

console.log(formData.get('name'));  // 输出 John

formData.append('name', 'Jane');  // 添加新的 name 字段
console.log(formData.getAll('name'));  // 输出 ['John', 'Jane']

formData.delete('age');  // 删除 age 字段
console.log(formData.has('age'));  // 输出 false

4. 与 FileReader 配合使用

FormData 可以与 FileReader 配合使用，以实现文件上传前的预览功能。例如，用户选择了文件后，可以预览上传的图片。

<input type="file" id="imageInput" />
<img id="imagePreview" />

let input = document.getElementById('imageInput');
let preview = document.getElementById('imagePreview');

input.addEventListener('change', function(event) {
  let file = event.target.files[0];

  let reader = new FileReader();
  reader.onload = function(e) {
    preview.src = e.target.result;
  };
  
  reader.readAsDataURL(file);
});

性能与注意事项

1. 内存管理：FormData 对象不会持久化，它只在创建时存储数据。因此，一旦创建了 FormData 对象，你应该在适当的时候将其传递到服务器，避免占用不必要的内存。

2. 跨浏览器支持：FormData 在现代浏览器中得到了很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但在旧版本的 IE 中不支持，需要适当考虑兼容性。

3. 文件限制：使用 FormData 上传的文件会受到浏览器和服务器的限制，例如文件大小、上传时间等。对于大文件上传，可能需要分片上传（Chunked Upload）等策略。

4. 安全性：确保在处理用户上传的文件时进行安全检查，避免服务器端受到恶意文件攻击。

总结

FormData 提供了一种简洁且灵活的方式来处理表单数据，特别适用于文件上传场景。它与 AJAX 的结合使用，使得开发者可以在不重新加载页面的情况下提交数据。理解 FormData 的基本用法，掌握其动态操作方法，可以帮助你更好地处理复杂的表单提交需求。