如何在AJAX中定义精准错误响应 实现图片上传格式与大小异常提示

实现方案 #

1. 修改upload.php代码 #

统一返回JSON格式的业务状态，前端根据返回的状态码和提示展示对应信息，修改后代码如下：

<?php
// 设置响应格式为JSON
header('Content-Type: application/json');

$file = $_FILES['file'];
$fileName = $_FILES['file']['name'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];
$fileType = $_FILES['file']['type'];

$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png', 'pdf');

// 校验文件格式
if (!in_array($fileActualExt, $allowed)) {
    echo json_encode([
        'code' => 400,
        'msg' => '上传文件格式不合法，仅支持jpg、jpeg、png、pdf格式'
    ]);
    exit;
}

// 校验上传系统错误
if ($fileError !== 0) {
    echo json_encode([
        'code' => 500,
        'msg' => '文件上传失败，发生未知错误'
    ]);
    exit;
}

// 校验文件大小
if ($fileSize >= 1000000) {
    echo json_encode([
        'code' => 400,
        'msg' => '上传文件体积过大，最大支持1MB文件'
    ]);
    exit;
}

// 所有校验通过，执行上传
$fileNameNew = uniqid('', true) . "." . $fileActualExt;
$fileDestination = "../test/assets/images/" . $fileNameNew;
move_uploaded_file($fileTmpName, $fileDestination);

// 返回成功结果
echo json_encode([
    'code' => 200,
    'msg' => '上传成功'
]);
exit;
?>

2. 修改AJAX调用代码 #

修复原有语法错误，新增业务状态判断逻辑，修改后代码如下：

$.ajax({
    url: 'upload.php',
    type: 'POST',
    data: fd,
    contentType: false,
    processData: false,
    dataType: 'json', // 声明预期返回JSON格式，自动解析响应
    success: function(result) {
        console.log('请求完成', result);
        // 根据返回的业务状态码处理
        if (result.code === 200) {
            // 上传成功才刷新页面
            location.reload();
        } else {
            // 业务错误，把返回的提示插入到页面
            $("#error").append(`<p>${result.msg}</p>`);
        }
    },
    error: function(xhr, status, error) {
        // 仅处理HTTP请求层面的错误，比如网络不通、接口404等
        var errorMessage = xhr.status + ': ' + xhr.statusText;
        console.log('请求错误', errorMessage);
        $("#error").append(`<p>上传请求失败，请稍后重试</p>`);
    }
});

3. 前端HTML准备 #

确保你的页面上存在用于展示错误提示的容器即可：

<div id="error" style="color: red;"></div>

改动说明 #

• PHP侧将所有校验结果都封装为统一结构的JSON返回，你可以随时调整msg字段的内容自定义提示文案
• AJAX侧不再将所有200响应都判定为成功，而是通过业务code判断结果，失败时直接把后端返回的提示插入到页面，不需要单独定义额外变量
• 修复了原有代码中判断相等误用单等于号、括号缺失等语法问题

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