Upload Foto jquery ajax dengan Croppie.js

Yang dibutuhkan adalah library jquery dan croppie. Letakkan croppie.css pada tag <body> dan jquery.js dengan croppie.js pada baris paling ahir html kalian.

download jquery di sini dan save file tersebut dengan nama jquery-3.4.1.min.js.

download coppie.js di sini

lihat ilustrasi berikut.

<html>
  <head>
    <!--letakkan kode link cropper.css disini-->
    <link href="croppie.css" rel="stylesheet" />
  </head>
  <body>
  <!--letakkan kode programmu disini-->
  </body>
  <!--letakkan script jquery.js dan croppie disini-->
  <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
  <script src="croppie.min.js" type="text/javascript"></script>
</html>

saya yakin kalian mengerti kode diatas save dengan nama index.html atau index.php, saya yakin kalian juga sudah mengerti kenapa harus pakan nama index. Selanjutnya lihat baris kode berikut.

<html>
<head>
  <title>Belajar Upload Foto dengan Cropper.js</title>
  <link href="croppie.css" rel="stylesheet" />
</head>
<body>
  <header><h1>UPLOAD FOTO</h1></header>
  <input type="file" id="upload"/><br>
  <button type="button" class="simpan">Simpan</button>
  <div id="pesan"></div>
  <div id="upload-tampil"></div>
  <footer>mesinketik.com.desalompotengah.com.desalompotengah.com.desalompotengah.com.desalompotengah.com</footer>
</body>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="croppie.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $('#upload').on('change', function() {
    var reader = new FileReader();
    reader.onload = function(e) {
      $uploadCrop.croppie('bind', {
        url: e.target.result
       }).then(function() {
         console.log('jQuery bind complete');
       });
     }
     reader.readAsDataURL(this.files[0]);
   });
   $uploadCrop = $('#upload-tampil').croppie({
     enableExif: true,
     viewport: {
       width: 220,
       height: 250,
     },
     boundary: {
       width: 230,
       height: 260
     }
   });
   $('.simpan').on('click', function(ev) {
     $uploadCrop.croppie('result', {
       type: 'canvas',
       size: 'viewport'
     }).then(function(resp) {
       if(document.getElementById("upload").files.length == 0) {
         var fsize = 0;
       }else{
         var fsize = document.getElementById("upload").files[0].size || f.fileSize;
       }
       $.ajax({
         url: "upload.php",
         type: "POST",
         data: {
           image: resp,
           poto: fsize,
         },
         success: function(data) {
           $("#pesan").html(data).fadeIn();
         }
       });
     });
    });
  });
</script>
</html>

Penjelasan singkatnya seperti berikut, perhatikan kode baris 8, kode tersebut adalah kode html untuk mengambil gambar dan lihat baris 18-28, kode tersebut adalah script jquery yang menjalankan fungsi jquery onchange id upload, jika id upload pada kode html berubah maka fungsi onchange id upload akan dikerjakan.

<input type="file" id="upload"/>
  $('#upload').on('change', function() {
    var reader = new FileReader();
    reader.onload = function(e) {
      $uploadCrop.croppie('bind', {
        url: e.target.result
       }).then(function() {
         console.log('jQuery bind complete');
       });
     }
     reader.readAsDataURL(this.files[0]);
   });

Kode selanjutnya yang akan di kerjakan adalah $uploadcrop pada baris 29-39, baris ini bertujuan untuk menyimpan preview sebelum crop dan meletakkannya pada id upload-tampil dengan ketetuan yang telah dibuat. Perhatikan baris 31-34, dalam variabel viewport pada baris 31 berdapat variabel widht dan heigth, lihat baris 32 kode width adalah lebar gambar yang akan di crop dan heigth adalah tinggi gambar yang akan di crop dengan penguran pixel, pada script saya mengisinya dengan 220px untuk lebar dan 250px untuk tinggi.

Pada baris ke 35 dalam valiabel boundary terdapat juga width dan height, jika kalian tidak menggunakan variabel ini maka secara default area halaman preview gambar akan disesuain dengan monitor komputer kalian, namun untuk mempercantik gaya halaman saya menggunakannya dan mengisinya dengan nial 230 untuk width dan 260 untuk heightnya untuk memberi kesan garis pinggir foto pada monitor.

   $uploadCrop = $('#upload-tampil').croppie({
     enableExif: true,
     viewport: {
       width: 220,
       height: 250,
     },
     boundary: {
       width: 230,
       height: 260
     }
   });

Baris berikut adalah baris 11 tempat diletakkannya preview gambar sebelum di crop

<div id="upload-tampil"></div>

Pada tahap ini saya sudah dapat mengatakan selamat karena kalian sudah dapat melakukan preview gambar, sekarang bagaimana melakukan crop gambar dan menyimpannya pada direktori. Pelatuknya ada pada baris kode ke 9.

<button type="button" class="simpan">Simpan</button>

Kuncinya terletak pada class simpan, jika tombol simpan tersebut di tekan maka class simpan akan bereaksi pada script jquery onclick class simpan pada baris ke 40-62

$('.simpan').on('click', function(ev) {
     $uploadCrop.croppie('result', {
       type: 'canvas',
       size: 'viewport'
     }).then(function(resp) {
       if(document.getElementById("upload").files.length == 0) {
         var fsize = 0;
       }else{
         var fsize = document.getElementById("upload").files[0].size || f.fileSize;
       }
       $.ajax({
         url: "upload.php",
         type: "POST",
         data: {
           image: resp,
           poto: fsize,
         },
         success: function(data) {
           $("#pesan").html(data).fadeIn();
         }
       });
     });
    });

Lihat pada baris 51, dalam fungsi ajax terdapat script url: “upload.php” yang artinya kita akan melakunan fungsi ajax terhadap file upload.php, tanpa berbasa basi sudah jelas file upload.php belum ada, jadi harus di buat dulu dan letakkan pada direktori yang sapa dengan halaman web kalian.

<?php
if(!empty($_POST['image'])){
    $foto = $_POST['image'];
	list($type, $foto) = explode(';', $foto);
	list(, $foto) = explode(',', $foto);
	$foto = base64_decode($foto);
	$imageName = time().'.png';
	file_put_contents($imageName, $foto);
}

Setelah cript tersebut kalian buat berarti anda telah berhasih melakukan proses upload gambar, struktur file yang kalian buat nantinya seperti gambar berikut

Terima kasih telah membaca.

Tinggalkan komentar