如何使用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如何真正工作的好信息，所以在很大程度上，除了复制粘贴代码之外，我不知道自己在做什么。有什么更好的方法可以做到这一点，或者我应该如何改变它？