使用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。