使用 ajax 发送图像名称

Question

我有一个可以保存的画布绘图，但是当我使用 ajax 时，我只能发送数据字符串并且我发送的名称没有被拾取，有人可以帮我解释为什么名称不是t被捡起来，是我的javascript或php有问题吗？

这里是 ajax javascript

var save_name = document.getElementById('save_name').value;

document.getElementById('imagebox').style.display = "none";
document.getElementById('imageoverlay').style.display = "none";
var Drawing = document.getElementById('canvas');
var drawingString = Drawing.toDataURL("image/png");
var postData = "canvasData="+drawingString;
var ajax = new XMLHttpRequest();

var name = "potato";
ajax.open("POST",'save_image.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.onreadystatechange=function()
{
    if(ajax.readyState == 4){
        alert("image saved");
    }
}
ajax.send(postData+"name="+save_name);

这里是 php

if(isset($GLOBALS["HTTP_RAW_POST_DATA"])){
    $name = $_POST['name'];
    $rawImage = $GLOBALS["HTTP_RAW_POST_DATA"];
    $removeHeaders = substr($rawImage, strpos($rawImage, ",")+1);
    $decode = base64_decode($removeHeaders);
    $fopen = fopen('user/'.$log_username.'/'.$name.'.png', 'wb');
    fwrite($fopen, $decode);
    fclose($fopen);
}

代码有效，但它只是没有选择名称，因此它将图像保存为.png

Answer 1

你有几个问题。

首先告诉 PHP，您的数据没有使用任何一种标准的表单数据编码进行编码：

ajax.setRequestHeader('Content-Type', 'canvas/upload');

PHP 不知道如何解析 canvas/upload 数据，因此它不会填充 $_POST。

如果您想填充$_POST，您需要指定其中一种格式。最接近您使用的格式的是application/x-www-form-urlencoded。

其次，在编写代码的过程中，您已将变量名从name 更改为save_name。你需要保持一致。

第三，您的数据未正确编码为application/x-www-form-urlencoded 数据。您需要：

1. 用& 字符分隔每个键/值对
2. 转义任何具有特殊含义的字符

这样的：

var postData = "canvasData=" + encodeURIComponent(drawingString) + 
        "&" + "name=" + encodeURIComponent(save_name);

第四，您正在尝试解析原始 HTTP POST 数据，但 PHP 可以为您解码 application/x-www-form-urlencoded。只需使用$_POST['name'] 和$_POST['canvasData']。

Answer 2

感谢大家的帮助 :D 我已经在你们的帮助下完成了

var save_name = document.getElementById('save_name').value;

            document.getElementById('imagebox').style.display = "none";
            document.getElementById('imageoverlay').style.display = "none";
            var data = canvas.toDataURL();
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function(){

                if(ajax.readyState == 4 && ajax.status == 200){

                    var imageoverlay = document.getElementById('imagesaveoverlay');
                        var imagebox = document.getElementById('imagesavebox');
                        var save_box_name = document.getElementById('save_box_name');
                        var ok_saved = document.getElementById('ok_saved');
                    var close_imagesave = document.getElementById('close_imagesave');

                    save_box_name.innerHTML = save_name;
                    imagesaveoverlay.style.display = "block";
                        imagesaveoverlay.style.height = winH+"px";
                    imagesavebox.style.left = (winW/2) - (550 * .5)+"px";
                    imagesavebox.style.top = "100px";
                    imagesavebox.style.display = "block";

                    close_imagesave.addEventListener('click', function () {

                                 document.getElementById('imagesavebox').style.display = "none";
                         document.getElementById('imagesaveoverlay').style.display = "none";
                        });  
                    ok_saved.addEventListener('click', function () {

                                 document.getElementById('imagesavebox').style.display = "none";
                         document.getElementById('imagesaveoverlay').style.display = "none";
                        }); 


                }

            }
            ajax.open("POST", "save_image.php", true);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.send("img="+data+"&name="+save_name);

而 php 是这样的 :D

$name =  $_POST['name'];
    $data = $_POST['img'];

    $data = str_replace('data:image/png;base64,', '', $data);
    $data = str_replace(' ', '+', $data);
    $img= base64_decode($data);

    $path = 'user/'.$log_username.'/'.$name.'.png';
    if(file_put_contents($path, $img)){
        print $path;

    }else{
        header('HTTP/1.1 500 Internal Server Error');
    }