Jquery AJAX 表单包含 2 种类型的数据

Question

我正在尝试通过一个ajax请求发送一个简单的数组和一个canvas.toDataURL()参数。数组发送正常，但画布数据没有。但是，如果我从发送中删除数组"formData"，画布数据就可以了。感谢您的任何帮助。这是我发送数据的代码：

var formData = {
        'name'              : $('input[name=name]').val(),
         'age'              : $('input[name=age]').val(),
          'gender'            :  $('input[name=gender]:checked').val(),
          'type'              : $('input[name=type]').val(),  
};
event.preventDefault(); 
$.ajax({
    type: "post",
    dataType: "json",
    url: "petupload.php",
    data: { image: canvas.toDataURL(), stuff: formData }
})

这是接收数据的代码（petupload.php）：

 <?php
 include('include/session.php');
  if($_SERVER['REQUEST_METHOD'] == "POST") {
  $array=$_POST['stuff']; // Fetching Values from URL
  $image = $_POST['image'];
  $name = $array['name'];
  $age = $array['age'];
  $gender = $array['gender'];
  $type = $array['type'];
 // image name  
$length = 10;
$characters = '0123456789abcdefghijklmnopqrstuvwxyz';
$imgname = '';
for ($i = 0; $i < $length; $i++) {
    $imgname .= $characters[rand(0, strlen($characters) - 1)];
 }
 // location to save cropped image
 $url = 'pictures/'.$imgname.'.jpg';
// remove the base64 part
$base64 = preg_replace('#^data:image/[^;]+;base64,#', '', $_POST['image']);
$base64 = base64_decode($base64);
$source = imagecreatefromstring($base64); // create
imagejpeg($source, $url, 100); // save image
$session->editpet($name, $gender, $type, $age);
$session->profilepic($imgname.'.jpg');
// return URL
$validation = array (
    'url'     => $url . '?' . sha1(uniqid(mt_rand(), true))
);
echo json_encode($validation);
}

Answer 1

您只需在

构建图像时将图像添加到表单数据中即可。

var formData = {
    'name': $('input[name=name]').val(),
    'age': $('input[name=age]').val(),
    'gender':  $('input[name=gender]:checked').val(),
    'type': $('input[name=type]').val(),  
    'image': canvas.toDataURL()
};