本文旨在解决在使用 Ajax 和 FormData 进行文件上传时，遇到的 $_POST 和 $_FILES 为空的问题。通过详细的代码示例和解释，我们将展示如何正确地构建 FormData 对象，并通过 Ajax 将文件和文本数据发送到服务器端，同时避免常见的错误配置，确保数据能够成功地被 PHP 脚本接收和处理。
在使用 Ajax 进行文件上传时，FormData 对象是一个强大的工具，它允许我们模拟 HTML 表单提交，并包含文件和其他表单数据。然而，如果配置不正确，可能会导致服务器端无法接收到数据，表现为 $_POST 和 $_FILES 为空。本文将详细介绍如何正确地使用 FormData 对象，并通过 Ajax 将文件和文本数据上传到服务器。
HTML 表单结构
首先，我们需要一个 HTML 表单，用于收集用户输入的文件和文本数据。关键在于正确设置 enctype 属性为 "multipart/form-data"，这是文件上传的必要条件。
<form name="usrupload" method="POST" enctype="multipart/form-data">
<label class="form-label text-start">Enter your Name
<input class="form-control" name="name" type="text" placeholder="John" />
</label>
<label class="form-label">Title
<input class="form-control" type="text" name="title" placeholder="Operator" />
</label>
<label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)
<input class="form-control" name="file" type="file" />
</label>
<input type='button' name='bttn' value='Submit' />
</form>注意事项：
- 确保每个 input 元素都有唯一的 name 属性，这对于服务器端区分不同的输入字段至关重要。
- 使用
JavaScript (jQuery) 代码
接下来，我们使用 JavaScript 和 jQuery 来处理表单提交和 Ajax 请求。
ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件
const form = document.forms.usrupload;
form.bttn.onclick = () => {
var form_data = new FormData(form);
$.ajax({
type: 'POST',
dataType: 'text',
cache: false,
contentType: false,
processData: false,
url: 'save_data.php',
data: form_data,
success: function(data) {
alert(data)
window.location = 'account.php';
}
});
}关键点解释：
- FormData(form): 直接将表单元素作为参数传递给 FormData 构造函数。这会自动收集表单中的所有字段和文件数据。
- contentType: false 和 processData: false: 这两个选项对于文件上传至关重要。contentType: false 告诉 jQuery 不要设置 Content-Type header，让浏览器根据 FormData 的内容自动设置。processData: false 告诉 jQuery 不要将 data 转换为字符串。
- data: form_data: 直接将 FormData 对象作为 data 选项的值传递给 Ajax 请求。
PHP 服务器端代码
最后，我们需要 PHP 代码来接收和处理上传的文件和文本数据。
<?php
$name = $_POST['name'];
$title = $_POST['title'];
$file = $_FILES['file'];
// 处理文件上传
$filename = $file['name'];
$tmp_name = $file['tmp_name'];
$error = $file['error'];
if ($error === UPLOAD_ERR_OK) {
// 移动文件到指定目录
$destination = 'uploads/' . $filename;
move_uploaded_file($tmp_name, $destination);
echo "File uploaded successfully!";
} else {
echo "File upload failed with error code: " . $error;
}
// 其他处理逻辑，例如将数据保存到数据库
?>要点说明：
- 使用 $_POST 数组访问文本数据，例如 $_POST['name'] 和 $_POST['title']。
- 使用 $_FILES 数组访问上传的文件信息，例如 $_FILES['file']['name']（文件名）和 $_FILES['file']['tmp_name']（临时文件路径）。
- 务必检查 $_FILES['file']['error'] 的值，以确保文件上传成功。
- 使用 move_uploaded_file() 函数将临时文件移动到指定目录。
常见问题和解决方案
- $_POST 和 $_FILES 为空： 检查 HTML 表单的 enctype 属性是否设置为 "multipart/form-data"，并确保 Ajax 请求的 contentType 和 processData 选项设置为 false。
- 文件上传失败： 检查 $_FILES['file']['error'] 的值，并根据错误代码进行排查。常见的错误包括文件大小超过限制、文件类型不符合要求等。
- JavaScript 错误： 确保 jQuery 库已正确加载，并且 JavaScript 代码没有语法错误。
总结
通过本文的教程，您应该能够正确地使用 Ajax 和 FormData 对象进行文件上传，并成功地在服务器端接收和处理数据。关键在于正确配置 HTML 表单、JavaScript 代码和 PHP 服务器端代码，并注意避免常见的错误。记住，FormData 对象是一个强大的工具，可以简化文件上传的流程，提高用户体验。
