將帶有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”存儲在表中。