Question

我一直在尝试管理签名图像的提交，以上传到文件夹并添加到同时运行数据库，但日子很艰难。除了将签名图像上传到文件夹并将其提交到具有相同记录的数据库之外，一切都可以正常工作。

我正在使用此jquery代码中的数字签名：https://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html

我所拥有的当前示例：http://dev.teqcube.com/signin-test/signin.php
这是给“新访问者”部分的

这是表格

<form method="post" action="">

    <!-- VISITOR FIRST NAME -->
    <div class="form-group">
      <input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
    </div>

    <!-- VISITOR LAST NAME -->
    <div class="form-group">
      <input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
    </div>

    <!-- VISITOR COMPANY NAME -->
    <div class="form-group">
      <input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
    </div>

    <!-- VISITING PURPOSE -->
    <div class="form-group">
      <select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
        <option value="" selected>Visiting Purpose</option>
        <option value="Visiting">Visiting</option>
        <option value="Cleaning">Cleaning</option>
        <option value="Delivery">Delivery</option>
        <option value="Maintanance">Maintanance</option>
      </select>
    </div>

    <!-- APARTMENT NUMBER -->
    <div class="form-group">
      <input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
    </div>

    <!-- FORM SUBMIT FOR NEW REGISTRATION -->
    <div class="submitBtnContainer">
      <button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
      <button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
    </div>


    <!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
    <div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- MODAL BODY LOGO -->
          <div class="col-md-12">
            <div id="signinSuccessModalLogo">
              <img src="img/Excellent-visitor-signin-small.png" alt="">
            </div>
          </div>

          <!-- MODAL BODY CONTENT -->
          <div class="col-md-12">
            <div class="modal-body" id="signinSuccessModalContent">

              <!-- DISPLAY IMAGE AFTER SIGNED -->
              <div id="signaturePad" data-role="content"></div>

              <!-- DIGITAL SIGNATURE SECTION -->
              <div  id="divPopUpSignContract">
                <div class="ui-content popUpHeight">
                  <div id="div_signcontract">

                    <!-- CANVAS TO DRAW SIGNATURE -->
                    <canvas id="canvas">Canvas is not supported</canvas>

                    <!-- SUBMIT SIGNATURE OR CLEAR -->
                    <div class="col-md-12">
                      <!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
                      <input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
                      <input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
                    </div>

                  </div>
                </div>
              </div>

            </div>
          </div>
          <!-- /MODAL BODY CONTENT -->

        </div>
      </div>
    </div>
    <!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->

</form>

这是将信息添加到数据库的php代码。

$ visitor_signature出现错误。我尝试了不同的方法，但没有成功。

// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {

  date_default_timezone_set('Asia/Dubai');
  $currentTime = date("H:i:s");

  // *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
  $visitor_first_name                   = $_POST['visitor_first_name'];
  $visitor_last_name                    = $_POST['visitor_last_name'];
  $visitor_company_name                 = $_POST['visitor_company_name'];
  $visitor_visiting_purpose             = $_POST['visitor_visiting_purpose'];
  $visitor_visiting_apartment_number    = $_POST['visitor_visiting_apartment_number'];
  //$visitor_visit_status               = $_POST['visitor_visit_status'];
  $visitor_signin_date                  = date("Y-m-d");
  $visitor_signin_time                  = date("H:i:s");
  $visitor_signout_date                 = date("H:i:s");
  $visitor_signout_time                 = date("H:i:s");

  $visitor_signature                    = $_FILES['visitor_signature']['name'];
  $visitor_signature_tmp                = $_FILES['visitor_signature']['tmp_name'];

  move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");

  exit();
  // *** I added exit() for testing purpose and once it works I remove it.

  // *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
  $query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
    visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";

  $query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
  '{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";

  $result = mysqli_query($connection, $query);

  // *** GENERAL CONFIM QUERY ***
  if(!$result) {
    die("QUERY FAILED. " . mysqli_error($connection));
  }
}

下面的代码是进行签名的js文件的一部分

function fun_submit() {
  if(isSign) {
    var canvas = $("#canvas").get(0);
    var imgData = canvas.toDataURL();
    jQuery('#signaturePad').find('p').remove();
    jQuery('#signaturePad').find('img').remove();
    jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
    jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));


    // I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
    // I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING

    closePopUp();
  } else {
    alert('Please sign');
  }
}

任何帮助将不胜感激。
问候

Answer 1

我认为您应该：

通过在表单中添加隐藏字段来更改HTML代码，如下所示： <input type=hidden name="visitor_signature" id="visitor_signature">
通过添加以下内容来更改fun_submit（）函数中的JS代码：jQuery('#visitor_signature').val(imgData)
，最后从以下位置更改PHP代码：

  $visitor_signature                    = $_FILES['visitor_signature']['name'];
  $visitor_signature_tmp                = $_FILES['visitor_signature']['tmp_name'];
  move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");

到

  $visitor_signature = $_POST['visitor_signature'];
 // we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
 // we remove the "data:image/png;base64,"
  $visitor_signature = preg_replace('#^data:image/\w+;base64,#i', '', $visitor_signature);
  $visitor_signature = base64_decode($visitor_signature);
  file_put_contents("img/sign-in-signatures/visitor_signature.png",$visitor_signature);

因为签名图像不再是上传文件，而是在文本字段“ visitor_signature”中放置了base64字符串

Answer 2

非常感谢您抽出宝贵的时间，

我按照您的指示做了，并开始出现sql错误：您的SQL语法有错误；查看与您的SQL Server版本相对应的手册，以了解在附近使用正确的语法

然后，我环顾了一下，并添加了base64_encode，然后将其插入数据库，然后它开始工作。没有base64_decode，图像将不会在文件夹中打开，但是之后没有编码，则图像将不会上传到数据库。代码现在看起来像这样：

    $visitor_signature                    = $_POST['visitor_signature'];

     // we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
     // we remove the "data:image/png;base64,"

    $visitor_signature                    = preg_replace('#^data:image/\w+;base64,#i', '', $visitor_signature);
    $visitor_signature                    = base64_decode($visitor_signature);

    file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);

    $visitor_signature                    = base64_encode($visitor_signature);

在数据库内部，它仍然添加了一个巨大的字符串，但是在后端，我正在调用图像：

// VISITOR SIGNATURE IMAGE
 echo "
 <td style='text-align:center;'>
    <img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
 </td>";

再次感谢您的宝贵时间，希望您在2019年过得愉快。
问候

将数字签名上传到文件夹并提交到数据库

这是表格

这是将信息添加到数据库的php代码。

下面的代码是进行签名的js文件的一部分

2 个答案: