使用 AJAX 传递数据到 PHP 上传脚本的正确方法-php教程-PHP中文网

使用 AJAX 传递数据到 PHP 上传脚本的正确方法

花韻仙語

发布： 2025-09-15 18:26:01

原创

214人浏览过

使用 ajax 传递数据到 php 上传脚本的正确方法

本文档旨在指导开发者如何正确地使用 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>');
    }
});

登录后复制

关键配置:

v0.dev

Vercel推出的AI生成式UI工具，通过文本描述生成UI组件代码

232

查看详情

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();

登录后复制

解释: