有jQuery帖子和使用php接收数据的问题

时间:2018-02-19 02:42:19

标签: php jquery ajax

所以我在使用jQuery将数据发布到php脚本时遇到了一些问题。我将图像数据从画布传递到php,然后将图像保存到服务器。我希望这在发送时保持为字符串,以便在php获取它时轻松实现。我也试过发送json,但没有成功。问题是我得不到任何回报。我在控制台中没有错误,php也没有留下任何错误让我找到。我也是暂时写入传递给txt文件的信息,以验证数据是否正在传递,它也是空的。我究竟做错了什么?此外,我已使用警报验证了DataURL var中的信息,并且它包含一个很好的字符串。

     var dataURL = Grabcanvas.toDataURL();

     $.ajax({
        url: 'upload.php',
        method: 'POST',
        dataType : 'text',
        data: {Image:dataURL},

        success : function(data) {
        console.log("sucessfull sending:");
        console.log(data);
        },
        error : function() {
        console.log('failed');
        }

php代码

$writeDir = "dir/text/";
$upload_dir = "dir/image/";

$img = $_REQUEST['Image'];

$myfile = fopen($writeDir."newfile.txt", "w") or die("Unable to open file!");
$txt = $img . "\n";
fwrite($myfile, $txt);
fclose($myfile);

$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
file_put_contents($file, $data);

3 个答案:

答案 0 :(得分:0)

在您的ajax调用中,您将密钥设置为图像{Image:dataURL},但在您的php脚本中尝试访问图像$_REQUEST['image']时,密钥区分大小写。将ajax中的那个更改为图像

答案 1 :(得分:0)

你可以试试这个

var dataURL = Grabcanvas.toDataURL();
         var data = new FormData();  // added this line
         data.append('Image', dataURL);  // I have added this line
 $.ajax({
    url: 'upload.php',
    method: 'POST',
    dataType : 'text',
    data: data,  //I have changed this

    success : function(data) {
    console.log("sucessfull sending:");
    console.log(data);
    },
    error : function() {
    console.log('failed');
    }

在PHP代码中更改以下内容

$img = $_REQUEST['Image']; //you have used image, mind it it is case sensitive

答案 2 :(得分:0)

这解决了它。显然我在这里向用户解释toDataURL()用于原生javascript DOM而不是jQuery DOM,我使用的是jQuery。因此,在重写代码以反映这一点之后,它现在可以正常工作并且不会失败地发送

    `$.ajax({
      url: 'upload.php',
      type: 'POST',
      dataType : 'text',
      data: {Image: $('#name of canvas')[0].toDataURL()}, //CHANGED
      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);
      }`