如何通过 AJAX 将 imgBase64 以表单形式发送到 php

Question

我正在为我的网站使用购物车插件，但我不知道如何以表格形式发送它，所以我决定将其制作为画布或屏幕截图并与表格一起发送。 但它不起作用。 这是我的代码： 表格：

<div class="container cart ">
  <form name="checkout" method="post" id="myForm" class="needs-validation" action="" novalidate="novalidate" onSubmit="clearField();">
    <div class="row ">

        <div class="col-sm-12 col-md-10 col-md-offset-1 ctabl">
            <table class="table table-responsive-sm w-100 table-hover" id="table" name="table">
                <thead>
                <tr>
                    <th>Tuote</th>
                    <th>Määrä</th>
                    <th class="text-center">Hinta</th>
                    <th class="text-center">Yhteensä</th>
                    <th> </th>
                </tr>
                </thead>
                <tbody id="cart-items" name="items">
                </tbody>
                <tfoot>
                <tr>
                    <td><a href="javascript:;" onClick="document.location.reload(true)" class="btn btn-danger" data-cesta-feira-clear-basket>Poista kaikki</a></td>
                    <td>  </td>
                    <td>Kokonaishinta</td>
                    <td class="text-right" id="total-value"><strong>€0</strong></td>
                    <td>  </td>
                </tr>

                </tfoot>
            </table>
        </div>
    </div>
    <div class="row tabl">
    <div class="col-md-4 order-md-2  mb-4 textarea">
     <div class="form-group">
    <label for="exampleTextarea">Tarjouspyyntö / lisätiedot (esim.tilattava määrä)</label>
    <textarea class="form-control" name="textarea" id="exampleTextarea" rows="15"  placeholder=""></textarea>
  </div>
    </div>
    <div class="col-md-8 order-md-1">
          <h4 class="mb-3">Tarjouspyynnön lähettäjä</h4>
     <hr class="mb-4">


    <div class="row">
              <div class="col-md-6 mb-3">

                <label for="firstName">Etunimi *</label>
                <input type="text" class="form-control" id="firstName" name="firstName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">Sukunimi *</label>
                <input type="text" class="form-control" id="lastName"  name="lastName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid last name is required.
                </div>
              </div>
            </div>
             <div class="mb-3">
               <label for="companyName">Yrityksen nimi <span class="text-muted">(valinnainen)</span></label>
                <input type="text" class="form-control" name="companyName" id="companyName" placeholder="" value="" >
                <div class="invalid-feedback">
                  Please enter a valid company name for shipping updates.
                </div>
              </div>
            <div class="mb-3">
             <label for="email">Sähköpostiosoite *</label>
              <input type="email" name="email" class="form-control" id="email" placeholder="you@example.fi" required="">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="mb-3">
              <label for="phone">Puhelin *</label>
              <input type="tel" class="form-control"  name="tel" id="tel" placeholder="0414826104" required>
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>



            <div class="mb-3">
              <label for="fileupload">Lataa kuva <span class="text-muted">(valinnainen)</span></label>
              <input type="file" name="fileupload" value="fileupload" id="fileupload" accept="image/png, image/jpeg">
            </div>
            <hr class="mb-4 order-3">
            <button class="submit-btn butt1 order-3" name="submit"  id="send" type="submit" onclick="validateForm()">Pyydä tarjous</button> </div> </div> </form>
            <div class="status" id="status"></div>

插件粘贴数据的地方在哪里。

我想制作这张产品表的图像并用表格发送。

    var c = document.getElementById('#cart-items');
            var t = c.getContext('2d');
            var dataURL = c.toDataURL();
    $(document).ready(function () {
        $("#myForm").on('submit', function (e) {

            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '../mail.php',
                data: {imgBase64: dataURL, $("myForm').serialize()},
                success: function () {
                  alert('form was submitted');
                }
        });
    });
});

和 PHP：

<?php
$name = $_POST['firstName'];
$email = $_POST['email'];
$message = $_POST['textarea'];
define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $filee = file_put_contents($file, $data);
header('Content-Type: application/json');
if ($name === ''){
  print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
  exit();
}
if ($email === ''){
  print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
  exit();
} else {
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
  print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
  exit();
  }
}
if ($subject === ''){
  print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
  exit();
}
if ($message === ''){
  print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
  exit();
}
$content="From: $name \nEmail: $email \nMessage: $message \nFile: $filee";
$recipient = "pozitroniya@gmail.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

所以实际上我不太了解PHP，所以有什么建议吗？

Answer 1

可能这不是您的回复，但我看到您的代码并发现了一些错误，请尝试检查并重试

• 此 ID 不存在

  var c = document.getElementById('#cart-items');

  由此改变

  var c = document.getElementById('cart-items');

• 我看到你通过 ajax 发送了一个带有序列化形式和 imgBase64 的对象，但是在你的 php 中从来没有得到这个 imgBase64，那么你为什么要发送它？ 或者为什么你从来没有得到这个？ 如果你需要写这样的东西

$imgBase64 = $_POST['imgBase64'];