将数据从Ajax返回到PHP

时间:2018-09-30 21:07:53

标签: javascript php ajax

下午好!

我正在尝试将图片的名称保存在数据库中...我有以下Ajax代码。.它完美地保存了照片中的图片,但是我无法将文件名返回到来自upload_foto_webcam.php的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

2 个答案:

答案 0 :(得分:2)

我建议从您的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
    ]);
}
?>

答案 1 :(得分:0)

您要如何处理图片名称?

如果要向用户显示已保存图像的名称,则可以使用jQuery从保存图像的php文件中获取文件名。

所以执行此操作的一种方法是在span或div或带有id标签的某些对象中打印/回显文件名,如下所示:

$ajax_return = '<div class="hide_this">
                    <div id="ajax_response">'.$response.'</div>
                </div>';
echo $ajax_return;

然后在进行ajax调用的文件中:

$.ajax({
    url: "upload_foto_webcam.php",
    method: 'POST',
    data: formdata,
    async: true,
    dataType: 'html',
    success: function(ajax_response) {
        // here you find the name of the saved image
        var saved_image_name = $(ajax_response).find("#ajax_response").text();
        // loading image name in container div/span
        $('#your_message_container').html(saved_image_name);
    }, // end success
    // handling error on ajax call
    error:  function(xhr, textStatus, errorThrown) {
        console.log(errorThrown ) ;
    } // end error handling
});

您可以在保存图像的php文件中格式化消息,然后返回完整消息:

  

该图像已另存为your_generation_image_name.jpg

并将此消息放入容器div中。