AJAX上传文件至WordPress设为特色图时出现SyntaxError错误

问题根源 #

1. 前端AJAX用serialize()无法处理文件上传数据，且未配置正确的表单提交参数
2. 后端PHP未处理media_handle_upload的错误场景，错误时会输出HTML格式的警告/报错，破坏JSON返回格式

1. 修复前端AJAX代码 #

改用FormData对象处理文件上传，同时配置AJAX关键参数：

<form method="post" id="form" action="edit-submit.php" enctype="multipart/form-data">
    <input type="hidden" name="postid" value="30" />
    <input type="text" name="cardid" value="28392148211" readonly />
    <input type="file" name="photo" accept=".jpg,.jpeg" />
    <input id="submit" type="submit" value="Submit">
</form>

<script>
$('#form').on('submit', function(e) {
    e.preventDefault(); // 阻止表单默认跳转提交
    
    let formData = new FormData(this);
    
    $.ajax({
        type: 'POST',
        url: 'submit.php',
        data: formData,
        processData: false, // 禁止jQuery自动处理数据，避免破坏FormData结构
        contentType: false, // 禁止jQuery设置请求头，让浏览器自动生成multipart/form-data头
        dataType: 'json',
        success: function(data) {
            if (data.status === 'success') {
                $('#submit').val('Thanks');
                console.log(data);
            } else {
                console.log('上传失败：' + data.message);
            }
        },
        error: function(jqXhr, textStatus, errorMessage) {
            console.log('请求错误：' + errorMessage);
        }
    });
});
</script>

修复细节：

• 替换serialize()为FormData，正确携带文件二进制数据
• 添加processData和contentType参数，确保文件上传的请求格式合规
• 绑定表单submit事件并阻止默认行为，避免页面跳转
• 修正表单标签错误：将input type="input"改为type="text"，修复提交按钮的标签不匹配问题

2. 修复后端PHP代码 #

处理上传错误场景，确保始终返回合法JSON：

<?php
define( 'WP_USE_THEMES', false );
require_once( 'wp-load.php' );

require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );

// 开启输出缓冲区，捕获可能的HTML错误输出
ob_start();

$post_id = isset($_REQUEST['postid']) ? intval($_REQUEST['postid']) : 0;
$rtn = ['status' => 'error', 'message' => ''];

if ($post_id > 0 && isset($_FILES['photo'])) {
    $attachment_id = media_handle_upload('photo', $post_id);
    
    // 检查上传是否成功
    if (!is_wp_error($attachment_id)) {
        set_post_thumbnail($post_id, $attachment_id);
        $rtn['status'] = 'success';
    } else {
        $rtn['message'] = $attachment_id->get_error_message();
    }
} else {
    $rtn['message'] = '参数错误或未选择文件';
}

// 清空缓冲区的错误输出，避免破坏JSON格式
ob_end_clean();

header('Content-type: application/json');
echo json_encode($rtn);
?>

修复细节：

• 用输出缓冲区(ob_start()/ob_end_clean())捕获并丢弃可能的HTML错误输出
• 检查media_handle_upload返回值，若为WP_Error则收集错误信息，不直接输出
• 增加参数合法性校验，确保postid有效且文件已上传
• 统一返回JSON格式，无论成功/失败都输出合法JSON数据

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