我一直在尝试管理签名图像提交以上传到文件夹并添加到 同时处理数据库，但遇到了困难。除了将签名图像上传到文件夹并将其提交到具有相同记录的数据库之外，一切正常。
我正在使用此 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');
}
}任何帮助将不胜感激。
问候
最佳答案
我认为你应该:
通过在表单中添加隐藏字段来更改 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 字符串
关于javascript - 将数字签名上传到文件夹并提交到数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53982430/