Javascript 阿贾克斯邮报快把我逼疯了。代码似乎正确，但在发送时失败

我正在使用ajax将画布图像发送到一个php页面，该页面将捕获该图像。控制台告诉我它每次都失败，甚至没有发送。我已经仔细检查了一切，但仍然没有发现问题。我终于离开了它一个星期，又回到了它，在过去的几个小时里，我仍然没有看到这个问题。我在看什么？服务器上的jQuery版本是2.2.4

var dataURL = canvas.toDataURL();
var pngImage = new FormData();
pngImage.append('Image', dataURL);

$.ajax({
  url: 'upload.php',
  method: 'POST',
  dataType : 'text',
  data: pngImage,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data) {
    console.log("sucessful send:");
    console.log(data);
  },
  error: function() {
    console.log('failed');
  }
});

更新：当使用

    var Grabcanvas = document.getElementById("signature");
    var ImgData = document.getElementById("Image").value = Grabcanvas.toDataURL();

    var pngImage = new FormData();

    pngImage.append('Image', $('#signature')[0].toDataURL());

    console.log(ImgData); 
    console.log(pngImage);

    $.ajax({
      url: 'upload.php',
      type: 'POST',
      dataType : 'text',
      data: pngImage,
      cache: false,
      contentType: false,
      processData: false,

      success: function(data) {
      console.log("sucessful send:");
      console.log(data);
      },
      error: function(d) {
      console.log('error');
      console.log(d);
      console.log(d.responseText);
      }

---

var ImgData

返回正确的画布数据，但是

var pngImage

是空的，并在控制台中返回为

FormData{}

。

我认为是因为您没有获得正确的pngImage元素

dataToURL（）我用于本机javascript dom，而不是jquery dom

这意味着如果画布的id为

#canvas

，则应执行以下操作：

var pngImage = new FormData();
        pngImage.append('Image', document.getElementById('canvas').toDataURL());

或者在jquery中

    pngImage.append('Image', $('canvas')[0].toDataURL());

因此，我们的代码如下所示：

<canvas id="canvas" width="5" height="5"></canvas>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
    $(function(){
        var pngImage = new FormData();
        pngImage.append('Image', $('#canvas')[0].toDataURL());
        
        $.ajax({
          url: 'upload.php',
          type: 'POST',
          dataType : 'text',
          data: pngImage,
          cache: false,
          contentType: false,
          processData: false,
          success: function(data) {
            console.log("sucessful send:");
            console.log(data);
          },
          error: function(d) {
            console.log('error');
            console.log(d); //show error
            console.log(d.responseText); //show error reponse text
          }
        });
    })
    </script>

更新：

我需要先吃午饭^_^

为什么你不能用$\u POST抓到POST？因为你没有写语法，我没有仔细阅读就复制粘贴了你的代码。（因此，我很幸运使用了$\u REQUEST XD）

method:'POST'

=>在jquery ajax中没有名为

method

的方法。正确的方法是

键入：“POST”

，然后您可以使用$\u POST捕获它。（尝试更改为$\u GET to for learning）

赫夫特。。。我怎么会错过呢

您希望使用二进制/blob样式上载图像，但您的数据实际上只是字符串/文本。在这种情况下，我真的更喜欢这样做

$（函数（）{
$.ajax({
url:'upload.php'，
键入：“POST”，
数据：{Image:$（'#canvas'）[0].toDataURL（）}，
成功：功能（数据）{
控制台日志（数据）；
},
错误：函数（d）{
console.log（'error'）；
}
});
})

PHP

---

举个例子，我认为这是你的元素

<canvas id="canvas" width="5" height="5"></canvas>

及

然后您可以通过Ajax发送

$.ajax({
   url: 'a.php',
   method: 'POST',
   data: dataURL,
   success: function(data) {
      console.log("sucessful send:");
      console.log(data);
   },
   error: function(d) {
      console.log('error');
      console.log(d); //show error
      console.log(d.responseText); //show error reponse text
   }
});

---

因此，对于那些在通过AJAX从画布发送图像时遇到困难的人，这里有一个答案。没有人会在这里给我正确的信息，或者只是想成为一个混蛋，继续投票。我在别的地方找到一个足够好的人来解释我的问题。使用

toDataURL（）

将画布转换为dataURL时，必须删除

data:image/png；base64，

从dataURL字符串中删除，否则它将不会发送。这是通过一个简单的行实现的，它是

var png=ImgData.split（'，'）[1]数据现在发送没有问题，可以在PHP中提取并转换，没有问题。我真诚地希望这对将来的人有所帮助，因为它给我带来了很多问题，让我得到了正确的答案

var Grabcanvas = document.getElementById("signature");

var ImgData = Grabcanvas.toDataURL();

var png = ImgData.split(',')[1]; //THIS IS WHAT DID IT

$.ajax({
  url: 'upload.php',
  type: 'POST',
  dataType : 'text',
  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  data: {"Image" : png},

  success: function(data) {
  console.log("sucessful send:");
  console.log(data);
  },
  error: function(d) {
  console.log('error');
  console.log(d);
  console.log(d.responseText);
  }

当您去掉这些选项时会发生什么，processData:false

仍然失败，除非我得到错误

TypeError:“append”调用了一个没有实现接口FormData的对象。

你能发布控制台/网络尝试的屏幕截图吗？我刚刚查找了一个发送画布数据的实例，我有以下参数：

contentType:false，processData:false，数据类型：“html”，

首先尝试将ImageUrl转换为Blob。看看这个，说说你的答案，怎么回答这个问题，为什么回答这个问题？这肯定是现在发出的。错误消失了，其传输数据也消失了。我只需要重写php来捕获数据。我猜由于它发送了一个数组，我可以通过一个

$\u请求捕获它？我非常感谢你。你在几秒钟内就解决了我遇到的问题。很appreciated@Micha
$\u请求
是一个既可发布又可获取的请求<代码>$\u GET

仅用于GET，而

$\u POST

仅用于POST。为什么我使用$\u REQUEST而不是$\u POST？因为我想毫无理由地使用它。真的没有理由。正确的方法是使用$\u POST，因为我们在ajaxI中使用了

方法：“POST”

，要求的是

$img=$\u POST['Image']没有将结果返回给我。我从来没有检索过数组，所以我有点不清楚。除非它是一个数组，否则我需要通过键和id获取它，比如
$img=$\u POST['Image'][0]@plonknimbuzz我看到jQuery和javascript之间有很多不同之处。很高兴知道。我真的很感谢你花时间在这方面帮助和教育我。非常感谢。
<?php print_r($_POST);?>

<canvas id="canvas" width="5" height="5"></canvas>

var canvas = document.getElementById('canvas');

var dataURL = canvas.toDataURL();

$.ajax({
   url: 'a.php',
   method: 'POST',
   data: dataURL,
   success: function(data) {
      console.log("sucessful send:");
      console.log(data);
   },
   error: function(d) {
      console.log('error');
      console.log(d); //show error
      console.log(d.responseText); //show error reponse text
   }
});

var Grabcanvas = document.getElementById("signature");

var ImgData = Grabcanvas.toDataURL();

var png = ImgData.split(',')[1]; //THIS IS WHAT DID IT

$.ajax({
  url: 'upload.php',
  type: 'POST',
  dataType : 'text',
  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  data: {"Image" : png},

  success: function(data) {
  console.log("sucessful send:");
  console.log(data);
  },
  error: function(d) {
  console.log('error');
  console.log(d);
  console.log(d.responseText);
  }