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

Question

我写了一个类似于调查的网页，在 html 文本框中提交条目以及 canvas 绘图的图像。目前我的 PHP 文件通过 'Post' 从 HTML 表单传输，一旦按下 "Submit" 就插入数据库。在我的 HTMl 文件中的脚本中，我通过 "var dataURL = canvas.toDataURL();".

转换 canvas 绘图

我想知道我将如何着手（希望使用相同的 PHP 文件）将 var dataURL 与我的 HTML 表单一起发送到 mySQL。我也不完全确定 dataURL 应该如何存储在 mySQL 中。但目标是创建一个像 "ID, Name, Image (dataURL)" 这样的条目。我对 PHP 还是很陌生，我听说 AJAX 通常被使用，但我不确定如何使它与 HTML 形式一起工作。

感谢任何帮助，谢谢！

Answer 1

如果你知道 javascript 那么请学习 jQuery 因为它将有助于使 ajax 请求更简单。在 ajax 的帮助下，您可以使用 POST.

发送数据

要存储数据url，需要在mysqltable中指定文件的地址：例如：如果我的个人资料图片在 "rootDIR/profiles/myname.jpg" 中，则将 "profiles/myname.jpg" 存储在 table.

中

Answer 2

您目前是如何发送数据的？您是否在 toDataURL() 中指定了数据格式？您还可以查看以下内容Decoding a canvas todataURL and Sending a canvas.toDataUrl() to php via AJAX，您也可以使用 canvas.toDataURL("image/png") 作为图像发送它。

这个问题最接近你的问题，可能有重复的问题看看How to save an HTML5 Canvas as an image on a server?

也通过 How To Save Canvas As An Image With canvas.toDataURL()? 和 Form submit with AJAX passing form data to PHP without page refresh

Answer 3

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

向您的表单添加隐藏输入，并使用数据填充该隐藏输入的值URL。
将自定义数据附加到您的序列化表单数据。

如果选择第二个选项，您的 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.
});

至于在 MySQL 数据库中存储数据 URL 值，您可以使用格式为 TINYTEXT、TEXT、MEDIUMTEXT 的字段，或 LONGTEXT 取决于正在生成的数据 URL 字符串的预期大小（请参阅 MySQL 8.0 参考手册中的 The BLOB and TEXT Types）。祝你好运！

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

Send HTML form with Javascript variable to PHP -> Mysql

html

javascript

php

mysql

web-hosting