Upload dan Kompres Gambar dengan PHP Ajax

Share:
compress image file php
Ini maksudnya contoh dari project yang akan kita kerjakan
Halo dunia! Dari tutorial sebelumnya, kita udah mainan aplikasi yang berhubungan sama instagram. Ngomong-ngomong soal instagram, kalo kalian main instagram pasti ngeluh soal kuota internet yang banyak banget keluarnya. Terus kita mikir, di instagram kenapa ngga di compress foto-nya biar penggunanya lebih ngirit internet.

Sebab punya pikiran macam itu, saya jadi kepikiran lebih dalam lagi, kenapa kok ga bikin tutorial kayak gitu ya? Meskipun kurang ada perlu-nya, tapi yang penting bisa ngepos

Kayanya langsung to the point aja deh. Kita akan bikin aplikasi compress image file pake php. Pertama, kita bikin file HTML-nya dulu buat interface-nya.

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Compress Image</title>
</head>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
     <h2>Pilih File :</h2>
     <input type="file" name="gambar" id="gambar">
     <button>Upload</button>
</form>

</body>
</html>

Saya kira html-nya cukup gitu aja, mengingat ini basic-nya saja. Kalau mau ditambahi silakan aja sesuai kebutuhannya. Ditambahi pake font awesome misalnya.

Lalu kita bikin file upload.php-nya buat menangani prosesnya. Oh iya, sebelum itu, kita buat dulu direktori baru yang dinamai "unggahan" dimana ini nanti dipakai buat nyimpen berkas (gambar) hasil unggahan. Dan berikut ini adalah script-nya.

<?php

// bikin function dulu
function kompres($sumber, $destinasi, $kualitas)
     $info = getimagesize($sumber);

     if ( $info['mime'] == "image/jpeg" )
          $gambar = imagecreatefromjpeg($sumber);
     else if ( $info['mime'] == "image/gif" )
          $gambar = imagecreatefromgif($sumber);
     else if ( $info['mime'] == "image/png" )
          $gambar = imagecreatefrompng($sumber);

     imagejpeg($gambar, $destinasi, $kualitas);
     return $destinasi;

// kemudian kita handle proses-nya
$berkas = $_FILES['gambar']['name'];
$tmp = $_FILES['gambar']['tmp_name'];

$dir = "unggahan/"; // ngatur direktori dimana gambar akan diunggah

if ( move_uploaded_file($tmp, $dir . $berkas))
     kompres($dir . $berkas, $dir . $berkas, 50);

?>

Script diatas akan mengurangi size berkas gambar sampai dengan 50%-nya. Ini bisa kita ubah di bagian pemanggilan fungsi kompres pada parameter ke-3.

Sebenarnya sampai disini aplikasi compress foto sudah bisa kita pakai. Tapi kalau mau ditambahi metode ajax, lanjut terus sampai dibawah.

Sebelum lanjut, kita tambahi terlebih dahulu library jquery karena kita akan memakai jquery.

<script src="http://cdn.riyansatria.tk/jquery-3.1.1.min.js"></script>

Terus kita bikin file upload.js untuk meng-handle ajax-nya.

var Upload = function(file) {
     this.file = file
}

Upload.prototype.getName = function() {
     return this.file.name
}

Upload.prototype.doUpload = function() {
     var that = this
     var formData = new formData()

     formData.append("file", this.file, this.getName())
     formData.append("upload_file", true)

     $.ajax({
          type: "POST",
          url: "upload.php",
          xhr: function() {
               var myXhr = $.ajaxSettings.xhr()
               return myXhr
          },
          success: function() {
               alert("gambar berhasil diunggah")
          },
          async: true,
          data: formData
     })
}


Tinggal disisipin aja tuh file-nya di dalem <head>. Untuk meng-handle form-nya, kita tulis script ini tepat diatas </body>

<script>
$(function() {
     $("#gambar").on("change", function() {
          var file = $(this)[0].files[0]
          var upload = new Upload(file)
          upload.doUpload()
     })
})
</script>

Kalo pake yang ber-ajax, gambar akan langsung diupload setelah kita memilih gambar dari penyimpanan lokal kita. Bisa juga dimodifikasi biar mengupload setelah mengklik tombol, tinggal diedit aja script yang menghandle form. Nice work...!

Tidak ada komentar