Ajax无法向外部PHP脚本传递POST数据及文件的问题

问题描述 #

尝试通过AJAX将包含文件的表单数据发送至外部URL的PHP脚本，但POST数据无法正常传递。移除AJAX配置中的processData: false, contentType: 'application/json'后，普通字段（如name: "john"）可正常传递，但文件仍无法上传；直接提交表单时PHP脚本可正常处理文件上传。

核心原因 #

上传文件必须使用multipart/form-data编码格式，当前代码设置contentType: 'application/json'会强制以JSON格式发送数据，PHP无法解析该格式下的文件数据；同时直接用普通对象传递文件不符合AJAX上传规范，必须使用FormData对象封装数据。

修改后的代码 #

HTML（无需修改） #

<form action="" id="actionForm" method="post" enctype="multipart/form-data">
    <figure class="info-wrap">
        <i class="fa-thin fa-cloud-arrow-up"></i>
        <label for="logo-upload">Drag & Drop files or <span>Browse</span></label>
        <p>Supported formats: PNG, JPG, PDF, WORD & ZIP</p>
        <input type="file" id="myfile" name="myfile">
    </figure>
    <input type="submit" name="submit" value="Upload" id="upload_Logo_file">
</form>

jQuery（关键修改） #

var client = $('input[name=clientID]').val();
$("#upload_Logo_file").on("click", function() {
    $('#actionForm').attr({'data-target': "uploadajax" });
});
$('#actionForm').submit(function(e) {
    var attr = $(this).attr("data-target");
    if (attr == "uploadajax") {
        // 用FormData封装表单所有数据，包括文件
        var formData = new FormData(this);
        // 添加额外普通字段
        formData.append('name', 'john');
        
        $.ajax({
            url: "External URL" + client,
            type: "POST",
            data: formData,
            dataType: "json",
            // 禁止jQuery处理数据、自动设置Content-Type（浏览器会自动生成正确的multipart/form-data头部）
            processData: false,
            contentType: false,
            // 跨域请求需开启（根据实际情况调整）
            xhrFields: {
                withCredentials: true
            }
        }).done(function(data) {
            if (!data.success) {
                if (data.errors.myfile) {
                    $('#actionForm').append('<div class="help-block">' + data.errors.myfile + "</div>");
                }
            } else {
                $("form").html(
                    '<div class="alert alert-success">' + data.message + "</div>"
                );
            }
        }).fail(function(xhr, status, error) {
            // 添加请求失败的调试提示
            $('#actionForm').append('<div class="help-block">请求失败: ' + error + "</div>");
        });
        e.preventDefault();
    }
});

PHP（调整跨域与错误处理） #

<?php
// 跨域请求处理（生产环境建议替换为具体允许的域名）
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
header("Content-Type: application/json");

$errors = [];
$data = [];

// 先校验必要参数
if (!isset($_GET['client'])) {
    $errors['client'] = 'Client ID缺失';
} else {
    $clientId = $_GET['client'];
    $file = $_POST['name'] ?? '';

    $targetDir = __DIR__ . "/$clientId/";
    // 创建存储目录
    if (!file_exists($targetDir)) {
        if (!mkdir($targetDir, 0777, true)) {
            $errors['dir'] = '无法创建存储目录';
        }
    }

    // 处理文件上传逻辑
    if (empty($errors)) {
        if (!isset($_FILES["myfile"])) {
            $errors['myfile'] = '未选择文件';
        } else {
            $fileInfo = $_FILES["myfile"];
            $targetFile = $targetDir . basename($fileInfo["name"]);
            $imageFileType = $fileInfo["type"];

            $allowedTypes = [
                'image/png' => 'png',
                'image/jpeg' => 'jpg',
                'application/pdf' => 'pdf',
                'application/msword' => 'doc',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document' => 'docx',
                'application/zip' => 'zip',
            ];

            // 文件存在性检查
            if (file_exists($targetFile)) {
                $errors['myfile'] = "文件已存在: $targetFile";
            }
            // 文件大小检查（3MB）
            elseif ($fileInfo["size"] > 3145728) {
                $errors['myfile'] = '文件过大，必须小于3MB';
            }
            // 文件类型校验
            elseif (!in_array($imageFileType, array_keys($allowedTypes))) {
                $errors['myfile'] = '仅支持PNG、JPG、PDF、WORD、ZIP格式';
            }
            // 移动上传文件
            elseif (!move_uploaded_file($fileInfo["tmp_name"], $targetFile)) {
                $errors['myfile'] = '文件上传失败';
            }
        }
    }
}

// 组装响应数据
if (!empty($errors)) {
    $data['success'] = false;
    $data['errors'] = $errors;
} else {
    $data['success'] = true;
    $data['message'] = '文件上传成功!';
}

echo json_encode($data);
?>

关键说明 #

1. FormData对象：通过new FormData(this)直接读取表单所有数据，包括文件；也可通过append方法添加额外字段，这是AJAX上传文件的标准实现方式。
2. AJAX参数配置：必须设置processData: false（禁止jQuery将FormData转为字符串）和contentType: false（让浏览器自动生成正确的multipart/form-data编码头部）。
3. 跨域处理：PHP中添加跨域响应头部，解决外部URL请求的权限问题，生产环境建议指定具体允许的域名而非通配符*。
4. 错误处理：PHP中补充了参数校验、目录创建失败的判断，避免未定义变量报错；AJAX新增fail回调，方便调试请求失败场景。

内容的提问来源于stack exchange，提问作者Scott Chambers