如何在PHP中访问javascript发送的FormData

Question

我有这个简单的程序，将canvas保存到blob file，我试图在php中检索它

我的console.log(FormData)显示blob

HTML:

<form id="formId">
<button id="click-photo" type="submit" value="submit">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
</form>

JavaScript:

form.addEventListener('submit', function(e) {
e.preventDefault();

var xhr = new XMLHttpRequest();
var image_data_url = "";
xhr.open('POST', 'image.php', true);
if(xhr.readyState === XMLHttpRequest.DONE) {
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
alert(xhr.reponseText);
};
};
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
image_data_url = canvas.toDataURL('image/jpeg');
var file = dataURLtoBlob( canvas.toDataURL('image/jpeg') );;

const fd = new FormData;
fd.append('image', file);
xhr.send(fd);
});

PHP:

<?php
if (isset($_FILES['image'])){
print_r ($_FILES['image']);
};
?>

Answer 1

您添加的图像名称与您要检索的图像名称不同。

form.addEventListener('submit', function(e) {
e.preventDefault();

var xhr = new XMLHttpRequest();
var image_data_url = "";
xhr.open('POST', 'image.php', true);
xhr.onreadystatechange = function ()
{
if(xhr.readyState === XMLHttpRequest.DONE) {
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
alert(xhr.reponseText);
};
};
}
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
image_data_url = canvas.toDataURL('image/jpeg');
var file = dataURLtoBlob( canvas.toDataURL('image/jpeg') );;

const fd = new FormData;
fd.append('image', file);
xhr.send(fd);
});

// ...
if (isset($_FILES['file'])){
// Up here it should be: if (isset($_FILES['image'])){
// ...