时间戳

首页 > 解决方案 > 将数据从 Ajax 返回到 PHP

javascript - 将数据从 Ajax 返回到 PHP

问题描述

下午好！

我正在尝试将我的图片名称保存在数据库中......我有以下 Ajax 代码..它完美地保存了折叠内的图片，但我无法将文件名返回到 PHP 变量中upload_foto_webcam.php...

我有 2 页...我的第一页是一个表单，它是我调用函数 Salvar_foto() 的地方...保存图片后，我想在表单的同一页面中返回已保存图像的名称。

        function salvar_foto()
    {

        var file =  document.getElementById("base64image").src;
        var formdata = new FormData();
        formdata.append("base64image", file);
        var ajax = new XMLHttpRequest();
        ajax.addEventListener("load", function(event) { upload_completo(event);}, false);
        ajax.open("POST", "upload_foto_webcam.php");
        ajax.send(formdata);

        document.getElementById('take_pic').style.display = 'none';
        document.getElementById('take_pic_again').style.display = 'none';
        document.getElementById('save_pic').style.display = 'none';         
    }

这是我的 PHP 文件：

<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['base64image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR .date("d-m-Y")."_".uniqid(). '.jpg';
$success = file_put_contents($file, $data);

$cliente_foto_webcam = $file;

print $success ? $file : 'Não é possível salvar o arquivo.';
?>

我想取回 $cliente_foto_webcam 变量...我该怎么办？

如果您能帮助我，我将不胜感激！

tks

标签： javascriptphpajax

解决方案

我会建议您的 PHP 后端提供 JSON 答案，例如：

{
    "filename": "my_image.jpg",
    "message": "Image uploaded!",
    "success": true
}

这将是这样的：

<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['base64image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR .date("d-m-Y")."_".uniqid(). '.jpg';
$success = file_put_contents($file, $data);

$cliente_foto_webcam = $file;

if ($success) {
    echo json_encode([
        "filename" => $cliente_foto_webcam,
        "message" => "Image uploaded!",
        "success" => true
    ]);
} else {
    echo json_encode([
        "filename" => null,
        "message" => "Couldn't upload image",
        "success" => false
    ]);
}
?>

推荐阅读