FormData与上传普通表单、二进制文件的进展追踪

2024-01-16 04:53:40

FormData：数据驱动的时代的表单处理神器

在当今数字化的世界中，数据扮演着至关重要的角色。网站和应用需要处理海量用户信息，从文本到图像再到文档，种类繁多。为了应对这一挑战，FormData对象应运而生，为开发者提供了一种简便高效的方式，构建和提交包含复杂数据的表单。

FormData 简介

FormData对象是一个 JavaScript API，它允许您创建和管理表单数据。与传统的<form>标签相比，FormData对象更加强大和灵活，因为它不仅支持文本数据，还支持文件和二进制数据。

表单上传

使用 FormData对象上传表单非常简单。首先，您需要创建一个 FormData 对象，然后使用 append() 方法添加表单字段。最后，您可以使用 submit() 方法将表单发送到服务器。

const formData = new FormData();
formData.append('username', 'testuser');
formData.append('password', 'password');
fetch('/login', {
  method: 'POST',
  body: formData
}).then(response => {
  // Handle the response from the server
});

二进制文件上传

FormData对象还允许您上传二进制文件。使用 append() 方法将文件添加到表单中即可。

const formData = new FormData();
formData.append('profile_picture', file);
fetch('/profile', {
  method: 'POST',
  body: formData
}).then(response => {
  // Handle the response from the server
});

进度条

FormData对象支持进度条，允许您跟踪表单上传的进度。使用 onprogress() 方法监听上传进度即可。

const formData = new FormData();
formData.append('profile_picture', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/profile', true);
xhr.upload.onprogress = function(e) {
  const progress = e.loaded / e.total * 100;
  // Update the progress bar
};
xhr.send(formData);