将带有Javascript变量的HTML表单发送到PHP-> Mysql

Question

我写了一个网页，其目的就像是一项调查，既在html文本框中提交条目，又在画布上绘制图像。 目前，一旦按下“提交”，我的PHP文件就会通过“发布”从HTML表单传输到数据库。 在HTMl文件中的脚本中，我通过“ var dataURL = canvas.toDataURL（）;”来转换画布图形。

我想知道如何（希望使用相同的PHP文件）将var dataURL与我的HTML表单一起发送到mySQL。 我也不完全确定dataURL应该如何存储在mySQL中。 但目标是输入“ ID，名称，图像（dataURL）”之类的条目。 我对PHP还是很陌生，我听说通常会使用AJAX，但是我不确定如何使它与HTML表单一起使用。

任何帮助表示赞赏，谢谢！

Answer 1

您目前如何发送数据？ 您是否在toDataURL（）中指定了数据格式？ 您还可以查看以下内容： 将canvas解码为dataURL并通过AJAX将canvas.toDataUrl（）发送至php ，也可以使用canvas.toDataURL（“ image / png”）作为图像进行发送。

该问题与您的问题最接近，可能有重复的问题。 如何将HTML5 Canvas保存为服务器上的图像？

还经历了如何使用canvas.toDataURL（）将画布另存为图像？ 和带有AJAX的表单提交将表单数据传递到PHP，而无需刷新页面

Answer 2

如果您要提交表单数据而不实际导航到浏览器中的脚本URL，则需要使用AJAX。 AJAX允许您将数据发送到脚本并从脚本接收响应，而无需离开页面即可。 如果这是您要寻找的内容，那么有很多示例说明如何在SO和其他来源上使用AJAX。 但是，由于您要发送一些自定义数据，因此有两个选择：

1. 将隐藏的输入添加到表单中，并使用dataURL填充该隐藏的输入的值。

2. 将自定义数据追加到序列化的表单数据中。

使用第二个选项，您的AJAX调用将类似于以下内容：

// this is the id of the form
$("#idForm").submit(function(e) {
    var form = $(this);
    var url = form.attr('action'); //PHP script URL can also be manually entered here if the form does not have the 'action' attribute set

    // get the dataURL from the canvas element
    var dataURL = encodeURIComponent(canvas.toDataURL());

    // build AJAX data string
    var dataString = form.serialize() + "&dataURL=" + dataURL;

    $.ajax({
        type: "POST",
        url: url,
        data: dataString,
        success: function(data){
            alert(data); // *optional* show response from the php script.
        }
    });

    e.preventDefault(); // cancel actual form submission.
});

至于将dataURL值存储在MySQL数据库中，您可以使用格式化为TINYTEXT ， TEXT ， MEDIUMTEXT或LONGTEXT MEDIUMTEXT ，具体取决于生成的dataURL字符串的预期大小（请参见MySQL 8.0参考中的BLOB和TEXT类型） 。手册）。 祝好运！

Answer 3

如果您知道javascript，请学习jQuery，因为它有助于使Ajax请求更简单。 借助ajax，您可以使用POST发送数据。

要存储数据URL，您需要在mysql表中指定文件的地址：例如：如果我的配置文件映像位于“ rootDIR / profiles / myname.jpg”中，则将“ profiles / myname.jpg”存储在表中。