本文档旨在解决在使用 Ajax 和 FormData 进行文件上传时，同时提交文本输入数据遇到的常见问题，例如 PHP 端无法获取 `$_POST` 和 `$_FILES` 数据。我们将详细介绍如何正确配置 HTML 表单、JavaScript 代码以及 PHP 后端，以实现完整的文件和文本数据上传功能。
HTML 表单配置
首先，确保你的 HTML 表单正确设置了 enctype 属性，并且 name 属性在表单中是唯一的。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 属性。
- label 元素应该通过 for 属性或直接包裹 input 元素来关联。
JavaScript (jQuery) 代码
使用 JavaScript (jQuery) 创建 FormData 对象，并将表单数据添加到其中。然后，使用 Ajax 发送 FormData 对象。
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';
}
});
}关键点：
- contentType: false 和 processData: false 是必须的，因为 FormData 对象会自动处理 Content-Type。
- 直接将 form_data 对象作为 data 属性的值传递给 Ajax 请求。
- 使用 new FormData(form) 可以直接将整个表单的数据添加到 FormData 对象中。
PHP 后端代码
在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局变量来访问上传的数据。
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
<?php $name = $_POST['name']; $title = $_POST['title']; $file = $_FILES['file']; // 其他处理文件和数据的代码 ?>
注意事项：
- 确保在访问 $_FILES 之前，检查文件是否成功上传。
- 进行适当的文件类型和大小验证，以确保安全性。
- 使用 move_uploaded_file() 函数将上传的文件移动到服务器上的安全位置。
完整示例
HTML:
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
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';
}
});
}
</script>PHP (save_data.php):
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$title = $_POST['title'];
if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
$file = $_FILES['file'];
$filename = $file['name'];
$filetmpname = $file['tmp_name'];
$filesize = $file['size'];
$filetype = $file['type'];
// 移动上传的文件到指定目录
$upload_dir = "uploads/"; // 确保该目录存在且可写
$filepath = $upload_dir . $filename;
if (move_uploaded_file($filetmpname, $filepath)) {
echo "File uploaded successfully!";
} else {
echo "Error uploading file.";
}
} else {
echo "No file uploaded or error during upload.";
}
echo "Name: " . $name . "<br>";
echo "Title: " . $title . "<br>";
} else {
echo "Invalid request method.";
}
?>总结：
通过正确配置 HTML 表单的 enctype 属性，使用 JavaScript 创建 FormData 对象，并设置 Ajax 请求的 contentType 和 processData 属性为 false，可以成功地将文件和文本数据一起上传到服务器。在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局变量来访问上传的数据。记住进行适当的验证和错误处理，以确保应用程序的安全性。
