本文旨在解决在使用 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 属性，这对于服务器端区分不同的输入字段至关重要。使用 zuojiankuohaophpcnlabel> 标签将文本描述与输入框关联，提高用户体验和可访问性。Javascript (jQuery) 代码
接下来，我们使用 Javascript 和 jQuery 来处理表单提交和 Ajax 请求。
码上飞 码上飞（CodeFlying） 是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。
138 查看详情 
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 对象是一个强大的工具，可以简化文件上传的流程，提高用户体验。
以上就是使用 Ajax 和 FormData 实现文件上传及文本数据提交的完整教程的详细内容，更多请关注php中文网其它相关文章！
