Question

我使用以下命令将HTML5文件元素中的JPEG文件作为字符串发布到PHP：

function createJPG() {
    var dataUrl = document.getElementById('canvas').childNodes[4].toDataURL("image/jpeg");
    console.log(dataUrl);
    var params = "theimage=" + dataUrl;
    var http = new XMLHttpRequest();
    http.open("POST", "/avatar/php/save-avatar.php", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.send(params);
}

一切都很好，dataUrl是正确的（在控制台中）并包含一个有效的JPEG文件。但是当我用PHP检索它时，所有的加号都被空格替换了？

PHP代码：

$name = "image.jpg";
$data=$_POST['theimage'];

file_put_contents($name, base64_decode(substr($data, strpos($data, ",")+1)));
file_put_contents("../images/avatars/uploads/generated" . rand(0,200) . ".txt", $data);

我使用文本文件来查看数据的样子，因为我无法弄清楚如何回显给JS :)。文本文件包含与JS控制台日志完全相同的数据，但没有+'es和替换空格，这导致JPEG文件损坏。

我该怎么办？

Answer 1

它不会删除它们。 +表示application/x-www-form-urlencoded数据中的“空格”。因此，当在服务器上解码URI时，它们会转换为空格。

由于总是用于获取一些数据并将其放入网址，因此您需要encode：

var params = "theimage=" + encodeURIComponent(dataUrl);

Answer 2

你应该对dataUrl进行urlencode：

var params = "theimage=" + urlencode(dataUrl);

XMLHttpRequest POST到PHP删除加号

2 个答案: