javascript - 使用 Ajax 和 PHP 上传图像

Question

我想在用户单击按钮时上传图像(#myid.save)。下面是我的代码:

HTML 代码:

<canvas id="cnv" width="500" height="100"></canvas>
<input id="myid_save" type="submit">Save</input>

JavaScript 代码:

$('#myid_save').on('click', function(e) {        
    e.preventDefault();
    saveViaAJAX();        
}); 

function saveViaAJAX()
{
    var testCanvas = document.getElementById("cnv");
    var canvasData = testCanvas.toDataURL("image/png");
    //var postData = "canvasData="+canvasData;

    $.ajax({
      type: "POST",
      url: "testSave.php",
      data: { 
         imgBase64: canvasData
      }
    }).done(function(o) {
      console.log('saved');                 
    });
}

testSave.php 文件:

<?php

    define('UPLOAD_DIR', 'C:\xampp\htdocs\drupal-7.34\sites\all\modules\myid\uploads\id_signature');
    $img = $_POST['imgBase64'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . '\sample.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.'; 
?>

我的控制台显示“已保存”，但我的服务器中没有保存图像。我哪里失踪了？

Answer 1

testSave.php 引用 $_POST['canvasData']，但 JS 发送预期变量为 imgBase64。该行应改为 $img = $_POST['imgBase64'] 以匹配 AJAX。