怎么在 JavaScript 中使用 FormData 对象

FormData 对象在 JavaScript 中可用于异步上传文件和发送表单数据。当需要通过 AJAX 技术发送表单数据时，使用 FormData 可以很容易地读取表单内的值、处理文件上传和构建键值对数据，而不必手动构造请求正文。如此可以简化通过 XMLHttpRequest 或 Fetch API 提交表单的过程、提高开发效率和用户交互体验。

FormData 对象提供一种表示表单数据的键/值对的构造方式，并可以使用 XMLHttpRequest 的 send() 方法发送。即使是文件上传，FormData 也能够轻松地异步上传，因为它支持二进制文件的序列化。FormData 通常与 AJAX 和 Fetch API 结合使用，使得提交表单数据和文件变得非常简单，不需显式地在 JavaScript 中设置 HTTP 请求头部。

一、创建 FORMDATA 对象

在 JavaScript 中，首先要创建一个 FormData 对象实例：

const formData = new FormData();

这个实例可以独立于任何表单创建。如果在构造函数中传入一个表单元素，则 FormData 对象会自动提取该表单的所有字段值。

const formElement = document.querySelector('form');

const formData = new FormData(formElement);

二、向 FORMDATA 对象添加数据

添加键值对

FormData 对象提供了 append() 方法来添加键值对。这个方法接受两个参数，第一个参数是键（name），第二个参数是值（value）：

formData.append('username', 'JohnDoe');

formData.append('age', 30);

文件上传

若需上传文件，可以将第二个参数设置为文件输入字段的文件对象：

const fileInput = document.querySelector('input[type="file"]');

const file = fileInput.files[0];
formData.append('profilePic', file);

三、使用 FORMDATA 与 XMLHTTPREQUEST

Ajax技术的核心是 XMLHttpRequest 对象，与 FormData 结合发起请求是十分常见的应用：

const xhr = new XMLHttpRequest();

xhr.open('POST', '/submit-form');
// 设置期望的返回数据类型
xhr.responseType = 'json';
// 监听请求状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            console.log('Data submitted successfully:', xhr.response);
        } else {
            console.error('An error occurred:', xhr.statusText);
        }
    }
};
// 发送 FormData 对象
xhr.send(formData);

四、与 FETCH API 整合

Fetch API 提供了一个现代化的方式来发起网络请求。它返回一个 Promise，使得与 FormData 结合使用非常简便：

fetch('/submit-form', {

    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));

五、FORMDATA 对象的其他方法

获取表单数据

FormData 对象提供 get() 和 getAll() 方法可以用来检索表单数据：

// 获取键为 'username' 的值

const username = formData.get('username');
// 获取键为 'profilePic' 的值，假设是一个文件字段
const profilePics = formData.getAll('profilePic');

检查表单数据键

FormData 对象还有 has() 方法，用于检查是否存在某个键：

if (formData.has('username')) {

    console.log('Username field is set.');
}

六、删除和修改 FORMDATA 对象的数据

FormData 对象同样也允许你删除或者替换已存在的键值对：

删除键值对

formData.delete('username');

替换已有的数据

formData.set('username', 'JaneDoe');

七、FORMDATA 和 HTTP 请求

在使用 FormData 对象与后端接口交互时，很重要的一点是后端服务必须支持 multipart/form-data MIME 类型的解析。这种 MIME 类型通常用于表单提交，并且允许发送非 ASCII 码以及二进制数据，使得文件上传成为可能。

八、结束语

总结来说，FormData 便捷地帮助开发者处理表单数据。通过使用 FormData，开发者可以轻松处理键值对数据、上传文件，并最终通过 XMLHttpRequest 或 Fetch API 将这些数据异步发送到服务器。FormData 对象的方法简单直观，是现代 Web 开发中处理表单数据的得力工具。

相关问答FAQs：

如何在 JavaScript 中使用 FormData 对象？

1. 什么是 FormData 对象？
   FormData 对象是一种特殊的 JavaScript 对象，用于在表单中收集数据。它主要用于将表单数据以键值对的方式组织，从而可以轻松地将数据发送到服务器。

2. 如何创建 FormData 对象？
   要创建 FormData 对象，只需使用 new 关键字并声明一个新的 FormData 变量即可。例如：var formData = new FormData();

3. 如何向 FormData 对象添加数据？
   您可以使用 FormData 对象的 append() 方法来向其中添加数据。该方法接受两个参数：第一个参数是键（即表单字段的名称），第二个参数是值。例如：formData.append('username', 'John');

4. 如何使用 FormData 对象发送数据到服务器？
   要发送 FormData 对象中的数据到服务器，您可以使用 XMLHttpRequest 对象或 Fetch API。通过将 FormData 对象作为参数传递给 send() 方法，您可以将数据发送到服务器。例如：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/submit', true);
xhr.send(formData);

5. FormData 对象与普通的表单提交有什么区别？
   与传统的表单提交相比，使用 FormData 对象可以更灵活地收集和发送数据。它可以处理文件上传以及其他复杂的表单数据，而无需手动构建表单数据字符串。此外，FormData 对象还支持在同一表单中多次使用相同字段名的情况。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。