Virus Corona (Covid-19)

Dapatkan Informasi terbaru

Contoh PHP Signature Pad | E-Signature Pad Menggunakan Jquery Ajax dan PHP

Jackma 13 May 2020 11,695

Hari ini, Kita akan belajar cara menggunakan pad e-signature menggunakan jquery ajax dan php. Saya ingin memberi Anda contoh pad tanda tangan php dan menyimpan gambar ke database. kita akan menggunakan pad tanda tangan jquery & gambar kanvas.

Anda dapat dengan mudah menggunakan tanda tangan jquery ui dan menyimpan gambar menggunakan PHP, Laravel dan Codeigniter juga.

Dalam contoh ini kita akan menggunakan pad tanda tangan jui kayu jithi ui untuk Anda dapat membuat tanda tangan Anda di atasnya. kami akan mengambil formulir php dan mengirimkan gambar tanda tangan itu dan menyimpan gambar itu ke dalam folder. Anda hanya perlu membuat di bawah dua file dan Anda bisa mendapatkan contoh.

Jadi, mari kita buat file index.php dan unggah.php dengan instruksi berikut.

Pertama-tama, Anda perlu mengunduh file tanda tangan jquery dari sini: Unduh file tanda tangan jquery .

Setelah mengunduh, Anda perlu membuat folder "asset" baru dan mengekstrak file zip unduhan. letakkan file jquery.signature.min.js dan jquery.signature.css ke folder aset.

Anda juga perlu membuat folder "upload" di direktori root Anda. kami akan menyimpan gambar di folder itu.

index.php

<!DOCTYPE html>
<html>
<head>
  <title>PHP Signature Pad Example - Medikre.com</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  
    <script type="text/javascript" src="asset/jquery.signature.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asset/jquery.signature.css">
  
    <style>
        .kbw-signature { width: 400px; height: 200px;}
        #sig canvas{
            width: 100% !important;
            height: auto;
        }
    </style>
  
</head>
<body>
  
<div class="container">
  
    <form method="POST" action="upload.php">
  
      <h1>PHP Signature Pad Example - Medikre.com</h1>
  
        <div class="col-md-12">
            <label class="" for="">Signature:</label>
            <br/>
            <div id="sig" ></div>
            <br/>
            <button id="clear">Clear Signature</button>
            <textarea id="signature64" name="signed" style="display: none"></textarea>
        </div>
  
        <br/>
        <button class="btn btn-success">Submit</button>
    </form>
  
</div>
  
<script type="text/javascript">
    var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
    $('#clear').click(function(e) {
        e.preventDefault();
        sig.signature('clear');
        $("#signature64").val('');
    });
</script>
  
</body>
</html>

upload.php

<?php
  
    $folderPath = "upload/";
  
    $image_parts = explode(";base64,", $_POST['signed']);
        
    $image_type_aux = explode("image/", $image_parts[0]);
      
    $image_type = $image_type_aux[1];
      
    $image_base64 = base64_decode($image_parts[1]);
      
    $file = $folderPath . uniqid() . '.'.$image_type;
      
    file_put_contents($file, $image_base64);
    echo "Signature Uploaded Successfully.";
?>

Saya harap ini dapat membantu Anda ...

Tags

php ajax

Related Stories


Latest Stories


Close Ads X