Bab 19: Mengirim Data File & Gambar dengan AJAX jQuery – Upload Tanpa Reload Halaman

Bab 19: Mengirim Data File & Gambar dengan AJAX jQuery – Upload Tanpa Reload Halaman

Setelah mempelajari Form Kirim Data AJAX + JSON, langkah berikutnya adalah mengirim file atau gambar ke server menggunakan jQuery. Teknik ini memungkinkan pengguna mengunggah file tanpa me-refresh halaman, yang sangat berguna untuk:

  • Upload foto profil
  • Upload dokumen
  • Galeri gambar dinamis
  • Form aplikasi modern

1. Struktur Form HTML untuk Upload File

<form id="formUpload" enctype="multipart/form-data">
  Nama File: <input type="text" name="namaFile" id="namaFile" required><br><br>
  Pilih Gambar: <input type="file" name="gambar" id="gambar" accept="image/*" required><br><br>
  <button type="submit">Upload</button>
</form>
<div id="result"></div>

Penting: gunakan enctype="multipart/form-data" untuk upload file.

2. Mengirim File dengan AJAX

Untuk mengirim file, gunakan FormData dan atur beberapa opsi AJAX:

$("#formUpload").submit(function(e){
  e.preventDefault();

  var formData = new FormData(this); // ambil semua data form termasuk file

  $.ajax({
    url: "upload.php",       // file server untuk menerima upload
    method: "POST",
    data: formData,
    processData: false,      // jangan ubah FormData menjadi string
    contentType: false,      // biarkan browser atur content type
    success: function(response){
      $("#result").html(response);
      $("#formUpload")[0].reset(); // reset form
    },
    error: function(xhr, status, error){
      alert("Terjadi kesalahan: " + error);
    }
  });
});

3. Contoh File PHP Sederhana (upload.php)

<?php
if(isset($_FILES['gambar'])){
    $fileName = $_FILES['gambar']['name'];
    $fileTmp  = $_FILES['gambar']['tmp_name'];
    $uploadDir = "uploads/";

    // Buat folder uploads jika belum ada
    if(!is_dir($uploadDir)) mkdir($uploadDir, 0777, true);

    $uploadFile = $uploadDir . basename($fileName);

    if(move_uploaded_file($fileTmp, $uploadFile)){
        echo "File berhasil di-upload: <a href='$uploadFile' target='_blank'>$fileName</a>";
    } else {
        echo "Upload gagal!";
    }
} else {
    echo "Tidak ada file yang dikirim!";
}
?>

File akan tersimpan di folder uploads/. Pastikan folder ini memiliki permission yang sesuai.

4. Contoh Lengkap Upload File + AJAX jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Upload File AJAX jQuery</title>
</head>
<body>

<h2>Form Upload Gambar</h2>
<form id="formUpload" enctype="multipart/form-data">
  Nama File: <input type="text" name="namaFile" id="namaFile" required><br><br>
  Pilih Gambar: <input type="file" name="gambar" id="gambar" accept="image/*" required><br><br>
  <button type="submit">Upload</button>
</form>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
  $("#formUpload").submit(function(e){
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax({
      url: "upload.php",
      method: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
        $("#result").html(response);
        $("#formUpload")[0].reset();
      },
      error: function(xhr, status, error){
        alert("Terjadi kesalahan: " + error);
      }
    });
  });
});
</script>

</body>
</html>

5. Tips dan Best Practice

  • ❌ Jangan lupa processData: false dan contentType: false saat mengirim FormData
  • ❌ Pastikan form memiliki enctype="multipart/form-data"
  • ❌ Selalu cek tipe file (accept="image/*") untuk validasi client
  • ❌ Tangani error dengan callback error agar pengguna tahu jika gagal
  • ❌ Reset form setelah upload agar form siap digunakan lagi

6. Kesimpulan

Pada Bab 19: Mengirim Data File & Gambar AJAX jQuery, Anda telah mempelajari:

  • Membuat form upload file/gambar
  • Mengirim data form + file ke server menggunakan AJAX + FormData
  • Menangani response server dan menampilkan hasil upload
  • Menerapkan Best Practice agar upload aman dan efisien

Fitur ini sangat penting untuk membangun aplikasi web modern yang interaktif, seperti upload foto profil atau dokumen.

Related Posts