Ajax上传croppie.js裁剪结果时如何获取PHP生成的图片文件名

方案1：上传完成后PHP将文件名回传给前端 #

核心逻辑是后端保存图片完成后直接输出文件名，前端在AJAX成功回调中接收即可使用。

修改后的uploader.php代码 #

<?php 
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents($imageName, $data);
// 新增：直接回传生成的文件名
echo $imageName;
exit;
?>

修改后的页面A JS代码 #

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "uploadown/uploader.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                // data参数就是后端返回的保存后的文件名，可按需存储、使用
                console.log('上传成功，文件名：', data);
                html = '<img id="cropresult" style="margin: 0px;" src="' + resp + '" />';
                $("#uploaded-input").html(html);                
            }
        });
    });
});

方案2：前端生成文件名传递给后端 #

核心逻辑是前端提前生成唯一文件名，和图片数据一起传给后端，后端直接用该文件名保存即可。

修改后的页面A JS代码 #

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        // 前端生成唯一文件名：时间戳+随机后缀避免重复
        const imageName = Date.now() + '_' + Math.random().toString(36).slice(2,8) + '.png';
        $.ajax({
            url: "uploadown/uploader.php",
            type: "POST",
            // 新增filename参数传递自定义文件名
            data: {"image":resp, "filename": imageName},
            success: function (data) {
                // 前端本身持有文件名，可直接使用
                console.log('上传成功，文件名：', imageName);
                html = '<img id="cropresult" style="margin: 0px;" src="' + resp + '" />';
                $("#uploaded-input").html(html);                
            }
        });
    });
});

修改后的uploader.php代码 #

<?php 
$data = $_POST['image'];
// 接收前端传递的文件名
$imageName = $_POST['filename'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
file_put_contents($imageName, $data);
// 可按需返回操作状态
echo 'success';
exit;
?>

补充注意 #

• 两种方案都建议增加文件合法性校验，比如校验base64是否为真实图片、限制文件大小、校验存储目录权限，避免恶意文件上传风险。
• 方案1适合文件名规则需要统一管控的场景，方案2适合前端需要提前知晓文件名做后续逻辑的场景。

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