使用 Ajax 和 PHP 上传图像答案

【问题标题】：Upload an Image using Ajax and PHP使用 Ajax 和 PHP 上传图像
【发布时间】：2015-05-29 23:47:24
【问题描述】：

我想在用户点击按钮时上传图片（#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.'; 
?>

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

【问题讨论】：

当然你的控制台显示“已保存”，因为 AJAX 请求本身是成功的……你的 PHP 脚本已经返回文件名或错误消息，所以你为什么不检查输出通过将done 处理程序中的o 值记录到控制台来执行该脚本？（这可能只是告诉您出了点问题，但它也可能显示 PHP 错误消息。）

标签： javascript php jquery ajax post

【解决方案1】：

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

【讨论】：

感谢您的指正，但即使我已经更改了我的代码，它仍然无法正常工作。