本文档旨在指导开发者如何正确地使用 AJAX 将数据（包括文件数据）传递到 PHP 上传脚本。重点在于如何构建 FormData 对象，并通过 AJAX 将其发送到服务器端，以及如何在 PHP 端安全地处理接收到的数据。同时，强调了避免 SQL 注入的重要性，并提供了相关的安全编码建议。
前端 JavaScript 代码
构建 FormData 对象
在前端，我们需要使用 FormData 对象来封装要上传的数据，包括文件和其他表单数据。关键在于正确地将数据添加到 FormData 对象中。
var id = "<?php echo $id ?>"; // 从 PHP 传递过来的 ID
var form_data = new FormData();
form_data.append("id", id); // 将 ID 添加到 FormData
var files = $('#multiple_files')[0].files;
// 检查文件数量
if (files.length > 15) {
alert('You can not select more than 15 files');
return; // 停止上传
}
// 将文件添加到 FormData
for (var i = 0; i < files.length; i++) {
form_data.append("multiple_files[]", files[i]); // 允许上传多个文件
}说明:
- 从 PHP 传递过来的 $id 值，需要先赋值给 JavaScript 变量。
- 使用 form_data.append("id", id); 将 ID 添加到 FormData 对象。
- multiple_files[] 允许后端 PHP 接收多个文件，并以数组的形式处理。
发送 AJAX 请求
使用 $.ajax() 函数发送 FormData 对象到服务器。
立即学习“PHP免费学习笔记（深入）”；
$.ajax({
url: "upload.php",
data: form_data,
method: "POST",
contentType: false,
cache: false,
processData: false,
beforeSend: function() {
$('#error_multiple_files').html('<br /><label class="text-primary">Uploading...</label>');
},
success: function(data) {
$('#error_multiple_files').html('<br /><label class="text-success">Uploaded</label>');
load_image_data();
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("AJAX Error:", textStatus, errorThrown);
$('#error_multiple_files').html('<br /><label class="text-danger">Upload Failed</label>');
}
});关键配置:
- contentType: false: 告知 jQuery 不要设置 Content-Type 头部。浏览器会自动根据 FormData 对象设置正确的 Content-Type。
- processData: false: 告知 jQuery 不要将 FormData 对象转换为字符串。
- 添加 error 回调函数，以便在上传失败时进行错误处理。
后端 PHP 代码
接收数据
在 PHP 端，使用 $_POST 和 $_FILES 数组来接收数据。
<?php
$id = $_POST['id'];
$files = $_FILES['multiple_files'];
// 检查是否有文件上传
if (isset($files) && is_array($files['name'])) {
// 循环处理每个上传的文件
for ($i = 0; $i < count($files['name']); $i++) {
$file_name = $files['name'][$i];
$file_tmp = $files['tmp_name'][$i];
$file_error = $files['error'][$i];
// 检查上传是否出错
if ($file_error === UPLOAD_ERR_OK) {
// 移动文件到指定目录
$destination = 'uploads/' . $file_name; // 确保 uploads 目录存在
if (move_uploaded_file($file_tmp, $destination)) {
// 文件上传成功，执行数据库操作
// **重要：使用预处理语句防止 SQL 注入**
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 使用预处理语句
$sql = "INSERT INTO tbl_image (postid, image_name, image_description) VALUES (?, ?, '')";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $id, $file_name);
if ($stmt->execute() === TRUE) {
echo "新记录插入成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$stmt->close();
$conn->close();
} else {
echo "文件移动失败";
}
} else {
echo "文件上传出错: " . $file_error;
}
}
} else {
echo "没有文件上传";
}
?>说明:
- $_FILES['multiple_files'] 是一个数组，包含所有上传文件的信息。
- 循环遍历 $files['name'] 数组，处理每个文件。
- move_uploaded_file() 函数用于将临时文件移动到指定目录。
- 务必进行错误检查，确保文件上传成功。
安全性：防止 SQL 注入
至关重要：永远不要直接将用户输入的数据插入到 SQL 查询语句中。这会导致严重的 SQL 注入漏洞。使用预处理语句 (Prepared Statements) 来防止 SQL 注入。
// 使用预处理语句
$sql = "INSERT INTO tbl_image (postid, image_name, image_description) VALUES (?, ?, '')";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $id, $file_name); // "ss" 表示两个字符串类型参数
if ($stmt->execute() === TRUE) {
echo "新记录插入成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$stmt->close();
$conn->close();解释:
- $conn-youjiankuohaophpcnprepare($sql): 预编译 SQL 语句，将 SQL 语句发送到数据库服务器进行解析和编译。
- $stmt->bind_param("ss", $id, $file_name): 将变量绑定到预处理语句中的占位符。 "ss" 指定了参数类型（字符串）。
- $stmt->execute(): 执行预处理语句。
总结与注意事项
- 确保正确构建 FormData 对象，并将所有需要的数据添加到其中。
- 在 AJAX 请求中，设置 contentType: false 和 processData: false。
- 在 PHP 端，使用 $_POST 和 $_FILES 数组接收数据。
- 务必使用预处理语句防止 SQL 注入。
- 进行充分的错误处理，以便在上传过程中出现问题时能够及时发现和解决。
- 确保服务器端有足够的权限写入上传目录。
- 可以添加文件类型和大小的验证，以增强安全性。
通过遵循这些步骤，可以安全、有效地使用 AJAX 将数据（包括文件）上传到 PHP 服务器。
