Cara Upload Gambar dengan Resize dan Thumbnail PHP (AJAX)

Mengelola upload gambar di website tidak hanya sebatas menyimpan file ke server. Dalam praktiknya, sering kali kita membutuhkan fitur tambahan seperti resize gambar dan pembuatan thumbnail secara otomatis.

Hal ini penting untuk menjaga performa website tetap cepat serta menghemat penggunaan storage. Pada tutorial ini, kita akan membahas cara upload gambar menggunakan PHP dengan proses resize dan pembuatan thumbnail, serta response berbasis AJAX.

Pertama, kita perlu menangkap file yang diupload dari client menggunakan variabel $_FILES.

<?php
if (isset($_FILES['gambar']['name'])) {

Selanjutnya, ambil informasi penting dari file seperti nama, ukuran, error, dan lokasi sementara file.

  $nama_file = $_FILES['gambar']['name'];
  $ukuran_file = $_FILES['gambar']['size'];
  $error = $_FILES['gambar']['error'];
  $tmp_file = $_FILES['gambar']['tmp_name'];

Kemudian lakukan pengecekan error untuk memastikan file berhasil diupload.

  if ($error === 0) {

Langkah berikutnya adalah mengecek format file yang diperbolehkan. Dalam contoh ini hanya mendukung JPG dan PNG.

    $format = pathinfo($nama_file, PATHINFO_EXTENSION);
    $format_gambar = array('jpg', 'jpeg', 'png');

    if (in_array($format, $format_gambar)) {

Setelah itu, kita membaca ukuran gambar asli menggunakan fungsi getimagesize.

      list($lebar, $tinggi) = getimagesize($tmp_file);

Kemudian buat canvas baru untuk gambar utama dan thumbnail.

      $canvas = imagecreatetruecolor($lebar, $tinggi);

      $lebar_thumbnail = 100;
      $tinggi_thumbnail = ($tinggi / $lebar) * $lebar_thumbnail;
      $canvas_thumbnail = imagecreatetruecolor($lebar_thumbnail, $tinggi_thumbnail);

Selanjutnya, baca file gambar sesuai formatnya.

      switch ($format) {
        case 'jpg':
        case 'jpeg':
          $gambar = imagecreatefromjpeg($tmp_file);
          break;
        case 'png':
          $gambar = imagecreatefrompng($tmp_file);
          break;
      }

Setelah itu, lakukan proses resize gambar utama dan thumbnail menggunakan imagecopyresampled.

      imagecopyresampled($canvas, $gambar, 0, 0, 0, 0, $lebar, $tinggi, imagesx($gambar), imagesy($gambar));

      imagecopyresampled($canvas_thumbnail, $gambar, 0, 0, 0, 0, $lebar_thumbnail, $tinggi_thumbnail, imagesx($gambar), imagesy($gambar));

Kemudian simpan hasil gambar yang sudah diproses ke folder server.

      switch ($format) {
        case 'jpg':
        case 'jpeg':
          imagejpeg($canvas, 'uploads/resized_' . $nama_file);
          break;
        case 'png':
          imagepng($canvas, 'uploads/resized_' . $nama_file);
          break;
      }

      switch ($format) {
        case 'jpg':
        case 'jpeg':
          imagejpeg($canvas_thumbnail, 'uploads/thumbnail_' . $nama_file);
          break;
        case 'png':
          imagepng($canvas_thumbnail, 'uploads/thumbnail_' . $nama_file);
          break;
      }

Terakhir, bersihkan memory dan kirim response JSON untuk AJAX.

      imagedestroy($canvas);
      imagedestroy($canvas_thumbnail);

      $response = array(
        'status' => 'sukses',
        'pesan' => 'Gambar berhasil disimpan',
      );

Jika terjadi kesalahan format atau upload, sistem akan mengirim response gagal dalam bentuk JSON.

    } else {
      $response = array(
        'status' => 'gagal',
        'pesan' => 'Format gambar tidak didukung',
      );
    }
  } else {
    $response = array(
      'status' => 'gagal',
      'pesan' => 'Gambar gagal diunggah',
    );
  }

  header('Content-Type: application/json');
  echo json_encode($response);
  exit;
}

Dengan metode ini, kamu bisa mengelola upload gambar secara lebih profesional. Gambar yang diupload akan otomatis diresize dan dibuatkan thumbnail, sehingga lebih efisien untuk digunakan di website seperti blog, portal berita, atau aplikasi berbasis web.