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

k5hmc34c  于 2021-06-17  发布在  Mysql
关注(0)|答案(2)|浏览(390)

我一直在努力管理，签名图像得到提交到一个文件夹上传，并添加到数据库在同一时间，但有一个艰难的时间。除了将签名图像上载到文件夹并将其提交到具有相同记录的数据库外，其他一切都正常工作。
我正在使用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代码。

$u签名有误。我尝试过不同的方法，但没有成功。

// ### 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文件的一部分，签名发生在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');
  }
}

任何帮助都将不胜感激。
当做

mysqlphpjqueryJavaScript

2条答案

按热度按时间
rjjhvcjd

rjjhvcjd1#

非常感谢你抽出时间，我很感激。
我照你说的做了，开始出现一个sql错误：你的sql语法有一个错误；请查看与您的sql server版本对应的手册，以获取要使用的正确语法
然后我环顾四周，在它插入数据库之前添加了base64\u编码，然后它就工作了。如果没有base64\u解码，图像将不会在文件夹中打开，但是如果没有编码，它不会上载到数据库。现在代码如下所示：

$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年。
当做

赞(0）分享  回复(0）举报  2021-06-18
bzzcjhmw

bzzcjhmw2#

我认为你应该：
通过在表单中添加隐藏字段来更改html代码，如下所示： <input type=hidden name="visitor_signature" id="visitor_signature"> 在fun\u 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\u signature”中的base64字符串

赞(0）分享  回复(0）举报  2021-06-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com