用 AJAX 将数据和文件同时上传到一个表单中

在前端开发中，我们经常需要将数据和文件一起上传到服务器。一种常见的实现方式是使用 AJAX 技术来发送表单数据，同时通过 FormData 对象来上传文件。

使用 FormData 对象上传文件

FormData 是 HTML5 提供的一个 API，用于将表单数据组合成键值对集合，以便用 XMLHttpRequest 发送数据。使用 FormData 对象可以很方便地将文件一起上传到服务器。

下面是一个简单的 FormData 示例：

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');
formData.append('avatar', fileInput.files[0]);

在上面的示例中，我们创建了一个 FormData 对象，并向其添加了三个字段：username、password 和 avatar。其中，avatar 字段是一个文件类型的表单项，它的值来自于一个文件选择框（file input）。

使用 AJAX 发送表单数据和文件

有了 FormData 对象，我们可以使用 AJAX 技术将表单数据和文件一起发送到服务器。下面是一个基于 jQuery 的 AJAX 示例：

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');
formData.append('avatar', fileInput.files[0]);

$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
        console.log('Upload success:', data);
    },
    error: function(xhr, status, error) {
        console.error('Upload error:', error);
    }
});

在上面的示例中，我们使用了 jQuery 的 $.ajax 方法来发送 AJAX 请求。其中，url 为上传接口地址，type 为 HTTP 请求类型，data 为要发送的数据，processData 和 contentType 则都设为 false，以便让 jQuery 不对 FormData 进行自动处理。

总结

本文介绍了如何使用 AJAX 技术将表单数据和文件一起上传到服务器。通过使用 FormData 对象组合数据，并使用 AJAX 发送请求，我们可以方便地实现这一功能。注意，在使用 AJAX 上传文件时需要将 processData 和 contentType 设为 false，否则会导致上传失败。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8701