Cara membuat Crop and Upload Menggunakan Ajax pada PHP

February 28, 2019

Cara membuat Crop and Upload menggunakan Ajax pada PHP – Hai ketemu lagi dengan saya dewankomputer dan pada kali ini saya akan membahas tentang upload image lagi namun pada kali ini sebelum kita mengupload gambar, kita akan menawarkan user untuk mengedit gambarnya terlebih dahulu sesuai dengan aturan dari website kita misalkan untuk panjang dan lebar dari gambarnya, jika sudah di crop maka barulah gambar diupload. Kita akan menggunakan plugin bernama croppie.

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP

Cara Membuat Upload dan Ekstrak Zip pada PHP

Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal

Sebelum membuat upload gambar tentunya kita harus mendownload librari/pluginnya terlebih dahulu. Pada project ini librari css yang kita butuhkan adalah sebagai berikut yang dimasukkan pada tag <head>

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/croppie.css">

1 2	<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/croppie.css">

Dan librari javascript adalah seperti dibawah yang dimasukkan pada tag <body> paling bawah

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/croppie.min.js"></script>

Tentunya sobat harus mendownloadnya terlebih dahulu pada website resminya disini :

1. Bootstrap

2. Jquery

3. Croppie

Atau sobat bisa download bersama project ini di akhir postingan.

Kita harus memasukkan css dan js diatas semuanya, jika ada yang kurang akan menyebabkan tidak akan berjalannya aplikasi ini. Jika sobat sudah memasukkan css dan jsnya selanjutnya kita mulai koding upload gambarnya yaitu sebagai berikut :

1. Buat form upload terlebih dahulu, saya membuatnya pada file index.php

<div class="row">
	<div class="col-sm-6 offset-sm-3">
		<div class="form-group">
			<label>Pilih Gambar</label><br>
			<input type="file" name="upload_image" id="upload_image" accept="image/*" />
		</div>
			
		<div id="uploaded_image"></div>
 	</div>
</div>

<div id="uploadimageModal" class="modal" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Crop &amp; Upload Gambar</h4>
            <button type="button" class="close" data-dismiss="modal" >
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
         </div>
         <div class="modal-body">
            <div class="row">
               <div class="col-md-12 text-center">
                  <div id="image_demo"></div>
               </div>
            </div>
         </div>
         <div class="modal-footer">
            <button class="btn btn-success crop_image">Crop &amp; Upload</button>
         </div>
      </div>
   </div>
</div>

<label>Pilih Gambar</label><br>

</div>

</div>

<h4 class="modal-title" id="myModalLabel">Crop & Upload Gambar</h4>

<span class="sr-only">Close</span>

</button>

</div>

</div>

<button class="btn btn-success crop_image">Crop & Upload</button>

</div>

Penjelasan :

Pada kode diatas berisi input file untuk mengupload gambar dan modal yang akan muncul setelah sobat memilih gambarnya. Dalam modal ini kita akan memasukkan gambar dan untuk mensetting posisi gambar yang ingin di potong.

2. Kemudian pada file index.php tepat diatas </body> tambahkan script dibawah

<script>  
$(document).ready(function(){
  $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:250,
      height:200,
      type:'square' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });
});  
</script>

$(document).ready(function(){

$image_crop = $('#image_demo').croppie({

enableExif: true,

viewport: {

width:250,

height:200,

type:'square' //circle

boundary:{

width:300,

height:300

}

});

$('#upload_image').on('change', function(){

var reader = new FileReader();

reader.onload = function (event) {

$image_crop.croppie('bind', {

url: event.target.result

}).then(function(){

console.log('jQuery bind complete');

});

}

reader.readAsDataURL(this.files[0]);

$('#uploadimageModal').modal('show');

});

$('.crop_image').click(function(event){

$image_crop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function(response){

$.ajax({

url:"upload.php",

type: "POST",

data:{"image": response},

success:function(data)

{

$('#uploadimageModal').modal('hide');

$('#uploaded_image').html(data);

}

});

})

});

</script>

3. Kemudian pada folder project sobat buat file upload.php untuk menuliskan kode untuk mengupload gambar yang sudah dicrop ke local storage. Isikan upload.php dengan script dibawah

<?php
if(isset($_POST["image"])){
	$tempdir = "upload/";
    if (!file_exists($tempdir))
      mkdir($tempdir);

	$data = $_POST["image"];
	$image_array_1 = explode(";", $data);
	$image_array_2 = explode(",", $image_array_1[1]);
	$data = base64_decode($image_array_2[1]);

	$imageName = $tempdir . time() . '.png';
	file_put_contents($imageName, $data);

	echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}
?>

<?php

if(isset($_POST["image"])){

$tempdir = "upload/";

if (!file_exists($tempdir))

mkdir($tempdir);

$data = $_POST["image"];

$image_array_1 = explode(";", $data);

$image_array_2 = explode(",", $image_array_1[1]);

$data = base64_decode($image_array_2[1]);

$imageName = $tempdir . time() . '.png';

file_put_contents($imageName, $data);

echo '<img src="'.$imageName.'" class="img-thumbnail" />';

}

4. Jalankan project sobat maka akan muncul seperti gambar dibawah

Jika sudah memilih gambar maka akan akan muncul modal seperti gambar dibawah. Tentunya disinilah kita memotong gambarnya sebelum diupload, kita juga bisa memperbesar atau memperkecil gambarnya

Dan jika sudah berhasil diupload maka gambar akan muncul

Secara otomatis pada folder project sobat akan muncul folder upload dengan di dalamnya sudah terisi oleh file yang sobat upload tadi

Begitulah cara memotong gambar sebelum diupload ke dalam local storage kita menggunakan Ajax. Jika sobat ingin menambahkan remove tentunya bisa saja dan sudah saya bahas pada postingan sebelumnya tinggal sobat tambahkan sendiri atau jika ingin menyimpannya pada database nanti akan saya bahas pada postingan saya selanjutnya. Sekian postingan saya tentang Cara membuat Crop and Upload Menggunakan Ajax pada PHP. Jika ada kesalahan saya mohon maaf dan apabila ada eror ata ada yang ingin ditanyakan silahkan tinggalkan komentar pada kolom yag telah disediakan. Kunjungi juga postingan saya lainnya yang berhubungan dengan ajax yang bisa menambah ilmu sobat.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :