如何用CropperJS+jQuery+PHP实现上传成功模态框关闭后刷新页面

你当前的代码存在两个逻辑冲突，导致更新不生效：

• AJAX是异步局部请求，PHP返回的<meta>刷新标签、<script>弹窗标签都存在于AJAX响应文本里，只要你不主动把这段文本插入当前页面DOM，浏览器不会解析执行这些标签
• 你在success回调里直接把整个响应内容塞给img的src属性，相当于把meta标签字符串当图片地址，自然无法加载新图，也不会触发页面刷新

第一步：先修改PHP后端代码 #

PHP端不要输出页面级的跳转、弹窗代码，只给AJAX返回纯结果数据即可。注意原SQL直接拼接变量存在SQL注入风险，正式环境建议改成预处理语句，以下是适配现有逻辑的修改版：

<?php
// 原有图片上传、生成$image_name的逻辑保持不变
$query = "UPDATE users SET display_pic = '$image_name' WHERE email = '$email'";
$data = mysqli_query($connec,$query); 

if($data){
    // 成功只返回新头像的可访问路径，不要输出meta标签
    echo $image_name; // 确保返回的路径前端可以直接访问
}else{
    // 失败返回错误标识，设置500状态码方便前端捕获
    http_response_code(500);
    echo "upload_failed";
}
?>

第二步：前端效果二选一即可 #

方案1：匹配需求，上传完成自动刷新整个页面 #

修改AJAX的success回调，关闭模态框后直接用JS触发页面跳转/刷新，不需要依赖PHP返回的跳转标签：

$('#crop').click(function(){
    const canvas = cropper.getCroppedCanvas({
        width:300,
        height:300
    });

    canvas.toBlob(function(blob){
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function(){
            const base64data = reader.result;
            $.ajax({
                url:'display_upload.php',
                method:'POST',
                data:{image:base64data},
                success:function()
                {
                    $modal.modal('hide');
                    // 跳转到个人页并带上成功参数，触发整页刷新
                    window.location.href = 'profile.php?message=success';
                },
                error:function(){
                    alert('上传失败，请重试');
                }
            });
        };
    });
});

方案2（体验更优）：无刷新局部更新头像，无需整页重载 #

不需要刷新整个页面，上传成功后直接更新头像地址，拼接时间戳破除浏览器缓存即可，加载速度更快：

$('#crop').click(function(){
    const canvas = cropper.getCroppedCanvas({
        width:300,
        height:300
    });

    canvas.toBlob(function(blob){
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function(){
            const base64data = reader.result;
            $.ajax({
                url:'display_upload.php',
                method:'POST',
                data:{image:base64data},
                success:function(newImgPath)
                {
                    $modal.modal('hide');
                    // 拼接时间戳破除浏览器缓存，直接替换头像
                    $('#uploaded_image').attr('src', newImgPath + '?t=' + Date.now());
                },
                error:function(){
                    alert('上传失败，请重试');
                }
            });
        };
    });
});

注：原代码中声明变量未加const/let会导致变量泄漏到全局，修改版已补齐该问题。

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