Nusagatizen

Cara Upload Gambar Menggunakan Ajax dan PHP

Tutorial yang akan aku bagikan kali ini mengenai cara membuat uploader gambar menggunakan Ajax dan PHP. Sebenarnya tidak hanya itu yang dibutuhkan. Kita masih juga membutuhkan JQuery, CSS, dan HTML. Tutorial ini kubuat karena ternyata memang masih banyak yang kesulitan untuk mengupload gambar atau file lain melalui ajax. Rata-rata cara upload gambar yang ada di internet langsung eksekusi lewat PHP. Entah menggunakan method POST ataupun GET.

Nah! Kebetulan kali ini aku mau buat tutorial yang mungkin bisa bermanfaat bagi pembaca sekalian. Langsung saja kita mulai.

Langkah pertama, kita siapkan form terlebih dahulu untuk menghandel pengguna di sisi klien. Kita buat sebuah file dengan nama index.html atau index.php. Lalu tambahkan tag input dan button di dalamnya.

Pada form di atas, beberapa hal yang perlu diperhatikan adalah id form dalam hal ini, aku menggunakan nama id gambar id=”gambar” , name pada tag input (aku menggunakan gambar).  Nama id form dengan name pada tag input tidak harus sama. Terakhir adalah atribut accept (pada contoh diatas valuenya adalah image/jpeg). Atribut ini untuk mencegah pengguna untuk memilih file yang tidak diperbolehkan untuk diupload. Dengan menambahkan atribut ini maka semua file yang mime typenya tidak didefinisikan tidak akan tampak.

Kedua, kita buat sebuah tombol dengan id upload.

<button id="upload" class="btn btn-info">Upload</button>

Id tombol atau button di atas nanti akan digunakan untuk selector jQuery.

Ketiga, buat sebuah div dengan id/class  tampil-gambar. Pada tutorial ini, aku menggunakan id.

<div class="tampil-gambar"></div>

Keempat, pastikan jQuery atau file pendukung lainnya sudah siap atau sudah diincludkan. Setelah itu, kita buat handlernya ketika tombol upload diklik menggunakan jQuery.

Perlu diperhatikan:

$(function(){ }); bisa diganti dengan $(document).ready(function(){ });

$(“#upload”).on(“click”, function(){ }); tidak bisa diganti dengan $(“#upload”).click(function(){ }); Meskipun keduanya sama-sama bisa menghandel event tetapi hasilnya berbeda. Jika diganti dengan kode yang kedua tersebut maka data gambar tidak bisa dikirim menggunakan ajax. Dalam kata lain, data yang dikirimkan selalu kosong (empty).

Selanjutnya, kita mengambil data gambar dari tag input kemudian disimpan ke dalam variabel data (namanya tidak harus data).

var data = new FormData($("#gambar")[0]);

Membuat variabel untuk tomboal agar lebih mudah memanipulasinya.

var btn = $(this);

Ketika tombol diklik, kita rubah teksnya menjadi memroses… atau teks lainnya.

btn.html("<i class='fa fa-spin fa-spinner'></i> Memroses...");

Keterangan: kombinasi class fa fa-spin fa-spinner akan menampilkan ikon oval yang berputar. Untuk menggunakan class ini dibutuhkan Font Awesome. jika font tersebut tidak ada, tidak akan merusak tampilan. Hanya ikon berputar tidak tampak.

Selanjutnya kita cek dulu apakah pengguna sudah memilih gambar apa belum. Jika belum, maka ketika tombol upload diklik kita tampilkan alert/pemberitahuan kalau gambar belum dipilih. Sebaliknya kalau sudah memilih gambar dan klik tombol upload maka kita eksekusi ajax untuk upload. Logika untuk ngecek pengguna sudah memilih gambar atau belum seperti di bawah ini:

Cara di atas bisa disederhanakan. Namun, agar tutorial ini bisa dipahami berbagai karakter dan pengetahuan pembaca maka dibiarkan seperti itu biar mudah dipahami.

Selanjutnya kita buat ajaxnya untuk menangani pengiriman data gambar ke php dan mengambil hasilnya untuk ditampilkan ke pengguna. Script ajax tersebut adalah:

Yang perlu diperhatikan dalam script ajax di sini adalah penggunaan cache: false,  contentType: false, processData: false. Tanpa ketiganya, data yang dikirimkan ajax adalah 0 alias kosong.

Kedua penggunaan fungsi setTimeout() digunakan untuk menampilkan gambar ketika gambar yang diupload berbeda namun di server namanya sama (overwrite). Tanpa menggunakan fungsi ini sebenarya bisa. Cukup menambahkan random kueri url seprti contoh do atas yaitu “?foo=”+new Date().getTime() dengan menambahkan kueri url dengan value yang unik maka gambar akan tetap berubah meskipun namanya ketika diupload ke server sama seperti gambar sebelumnya(overwrite).

Terakhir adalah handler untuk upload dari sisi server menggunakan PHP. Buat file PHP dengan nama data.php di folder yang sama dengan index.html atau index.php. Ketikkan script berikut:

Keterangan: Angka 0 (nol) bisa diganti dengan keterangan error sesuai jenisnya masing-masing dan ditampilkan ke klien melalui ajax respose.

Script index.php atau index.html lengkap adalah seperti ini:

Demo Upload gambar menggunakan Ajax dan PHP ini bisa dilihat di halaman ini. Jika ada pertanyaan lebih lanjut atau ada kendala ketika mencoba tutorial ini bisa menghubungi admin melalui kolom komentar, Google Hangout atau email ke [email protected], atau melalui sosial media yang tersedia. Terimakasih telah berkenan mampir.

 

Cheers
Nusagate

Pencarian Terkait:

Tahukah Kamu Arti piktogram?

pik·to·gram n Ling aksara yg berupa gambar untuk mengungkapkan amanat tertentu, msl tanda lalu lintas
Selengkapnya...

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: [email protected]. Hubungi via 0822 2500 5825

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Close