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

Question

I am using shopping cart plugin for my website but I dont know how to send it in form, so I decided to make it as canvas or screenshot and send with the form. But it doesn't work . Here is my code: Form:

<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>

where is place where plugin pastes data.

I want to make an image of this table of product and send it with form.

    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');
                }
        });
    });
});

and 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();
?>

so actually I dont know about PHP so much so any suggestions?

Answer 1

Probably this is not a your response but I see your code and found a few errors , try to check that and try again

• this ID not exist

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

  change by this

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

• I see that yo send by ajax a object whit a serialiced form and a imgBase64, but in your php never get this imgBase64, then Why you send it ? or Why you never get this? if you will get this need to write something like this

$imgBase64 = $_POST['imgBase64'];