使用Ajax XMLHttpRequest向PHP发POST请求实现图片旋转问题求助

核心问题梳理 #

• POST请求未按键值对格式传参，导致PHP无法读取$_POST['image']参数
• PHP脚本旋转完成后未返回新的图片标签内容，前端无法更新展示
• 浏览器缓存导致图片文件修改后依然加载旧资源，看不到旋转效果
• 不建议使用GET请求：修改服务器端文件的操作属于写入类操作，用POST可以避免缓存误触发、爬虫误访问等问题

修改后代码 #

1. JS代码 #

function rotateImage(){
    var xhttp = new XMLHttpRequest();   
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("rotate").innerHTML = this.responseText;
       }
    };
    xhttp.open("POST", "rotate.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // 修正：按键值对格式传参，对应PHP的$_POST['image']
    xhttp.send("image=<?php echo htmlspecialchars($fileName); ?>");
}

2. PHP代码 #

<?php 
// 安全校验：正式环境建议增加文件名白名单/路径限制，避免任意文件读取漏洞
if(!isset($_POST['image']) || !file_exists($_POST['image'])) {
    exit('参数错误');
}
// 可根据需求修改为支持png/gif的格式处理，这里按原有jpeg逻辑保留
$imagePath = $_POST['image'];
$degree = 90;
$source = imagecreatefromjpeg($imagePath);
// 执行旋转
$rotate = imagerotate($source, $degree, 0);
// 保存覆盖原文件
imagejpeg($rotate, realpath($imagePath), 100);
imagedestroy($source);
imagedestroy($rotate);

// 输出新的img标签，加时间戳参数破除浏览器缓存
list($width, $height) = getimagesize($imagePath);
$timestamp = time();
echo '<img class="rounded img-fluid" src="'.$imagePath.'?t='.$timestamp.'" alt="Your Profile Photo" width="'.$width.'" height="'.$height.'" />';
?>

3. HTML代码（无需修改，和原有逻辑兼容） #

<div class="row justify-content-center mb-3">
    <div class="col-lg col-auto">
    <?php list($width, $height) = getimagesize($fileName); ?>     
        <div class="mb-1" id="rotate"><img class="rounded img-fluid" src="<?php echo $fileName; ?>" alt="Your Profile Photo" width="<?php echo $width; ?>" height="<?php echo $height; ?>" /></div>
        <div class="text-center"><button onClick="rotateImage()" class="btn btn-outline-primary btn-sm"><i class="fas fa-sync-alt"></i> Rotate</button></div>
  </div>

额外注意事项 #

• 务必保证图片所在目录有PHP进程的写入权限，否则无法保存旋转后的图片
• 正式环境不要直接使用前端传的文件名操作文件，建议将上传后的文件名存在用户session中，旋转时直接读session里的路径，避免路径遍历漏洞
• 如果需要支持png、gif等格式，要替换imagecreatefromjpeg、imagejpeg为对应格式的处理函数

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