发送带有 ajax 和表单数据的 base64 图像

Question

我的客户想要捕获表单数据和签名（使用 signaturePad），我已经使用 ajax 创建了一个解决方案，但我无法让两者一起工作。

如果我这样发送图像数据：

var image = signaturePad.toDataURL();
$.ajax({
        url: './test1.php',
        type: 'POST',
        data: { imageData: image }
    })

这个结果不错，我可以稍后保存图像。（只发送图片数据，不发送表单数据）

但是当我尝试像这样发送图像和表单数据时：

var image = signaturePad.toDataURL();
data = $('#form').serialize() + '&imageData=' + image;
$.ajax({
        url: './test1.php',
        type: 'POST',
        data: data
    })

图片已保存，但稍后打不开，我想是发送方式出错了。

如果我向控制台输出 imageData 变量，第一个实验的结果是一个文本块，第二个实验的输出是一个文本块但不同，它有换行符，例如。

最好的解决方案是使用第二个实验，因为我的表单有类似输入的数组，并且逻辑已编写且工作正常，但由于某些未知原因图像已损坏。任何帮助表示赞赏。

编辑：图像是 base64 编码的 png。

Answer 1

解决方案是在表单中使用 serializeArray()，然后将 'imageData'（base64 图像）作为对象推送到数组：

//base 64 image
var image = signaturePad.toDataURL();

//form data serialized
data = $('#form').serializeArray();

//create and push imageData to array as object
b={ name: 'imageData', value: image };
data.push(b); 

//send POST request
$.ajax({
    url: './test1.php',
    type: 'POST',
    data: data
})

现在图像已创建并发送 post 没有问题！

发送带有 ajax 和表单数据的 base64 图像

Sending base64 image with ajax and form data

php

ajax

jquery

base64

image