Javascript 如何使用xmlhttprequest发送图像和其他数据？

我几乎整天都在讨论这个问题，但我不知道xmlhttprequests是如何工作的

我可以用一种方式发送字符串和内容，也可以用另一种方式发送图像文件，但我不知道如何同时发送它们

我尝试将图像的dataUrl作为字符串发送，但其中有多个“+”使其中断。这就是我如何学会以一种有效的方式发送图像（从画布），但我不知道如何修改它以获取更多信息：

var xhr = new XMLHttpRequest();
xhr.open("POST", "uploadimg.php", false);
xhr.setRequestHeader("Content-Type", "application/upload");
xhr.send(canvas.toDataUrl());

和php：

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])){

    $received = $GLOBALS['HTTP_RAW_POST_DATA'];
    $imageData = substr($received, strpos($received, ",")+1);
    $unencodedData = base64_decode($imageData);

    $fp = fopen("images/" . date("Y-m-d-G-i-s") . ".png", "wb");
    fwrite( $fp, $unencodedData);
    fclose( $fp );
}

此外，如果我将来出于某种原因想发送多个文件，我将不知道如何发送

---

我找不到关于xmlhttprequests如何真正工作的好信息，所以在很大程度上，除了复制粘贴代码之外，我不知道自己在做什么。有什么更好的方法可以做到这一点，或者我应该如何更改它？

使用JSON字符串怎么样。例如：

xhr.send({
  image1: canvas1.toDataUrl(),
  image2: canvas2.toDataUrl(),
  image3: canvas3.toDataUrl(),
  some_string: 'some string here',
  number: 5,
  created_on: new Date()
});

---

另外，请求的内容类型需要是

application/json

@SLaks这些对我来说没有多大作用，因为整个http请求都是？？？？？对我来说。我理解javascript，也基本上理解PHP，但我不知道计算机实际上是如何发送和理解正在传输的数据的。