FormData 对象 - JavaScript 编程网

FormData 是一种用于处理表单数据的 JavaScript 对象，通常与 XMLHttpRequest 或 fetch() API 一起使用，以发送表单数据（尤其是包含文件上传的复杂表单）到服务器。以下是一个简单的 FormData 教程。

1. 创建 FormData 对象

你可以通过以下方式创建一个 FormData 对象：

// 空的 FormData 对象
const formData = new FormData();

// 从 HTML 表单中获取数据
const formElement = document.querySelector('form');
const formDataFromForm = new FormData(formElement);

2. 添加数据到 FormData

你可以使用 append() 方法向 FormData 中添加键值对。支持的数据类型包括字符串、数字、Blob 和 File。

formData.append('username', 'JohnDoe'); // 字符串
formData.append('age', 30); // 数字
formData.append('file', fileInput.files[0]); // 文件

注意： - 如果键已经存在，append() 会追加另一个值。 - 如果需要覆盖已有值，可以先调用 delete()。

3. 获取 FormData 数据

你可以通过迭代器或直接访问来获取 FormData 中的内容。

使用 forEach 遍历：

formData.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

使用 entries() 获取键值对：

for (let [key, value] of formData.entries()) {
    console.log(key + ': ' + value);
}

4. 发送 FormData 到服务器

你可以使用 fetch() 或 XMLHttpRequest 将 FormData 发送到服务器。

使用 fetch()：

fetch('https://example.com/upload', { method: 'POST', body: formData })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

使用 XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/upload', true); 
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  } 
};
xhr.send(formData);

5. 示例：完整的文件上传功能

以下是一个完整的文件上传示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="text" name="username" placeholder="Username">
        <input type="file" name="file"> <button type="submit">Upload</button>
    </form>

    <script>
    const form = document.getElementById('uploadForm');

    form.addEventListener('submit', async (e) => {
        e.preventDefault(); // 阻止默认提交行为

        const formData = new FormData(form);

        try {
            const response = await fetch('https://example.com/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            console.log('Server Response:', result);
        } catch (error) {
            console.error('Error:', error);
        }
    });
    </script>
</body>
</html>

6. 注意事项

FormData 会自动设置正确的 Content-Type，不需要手动设置。
如果你需要自定义 Content-Type，请确保不使用 FormData 的自动处理。
文件上传时，服务器端需要正确解析 multipart 格式的数据。

声明：本站所有文章和图片，如无特殊说明，均为原创发布，转载请注明出处。