Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Membuat JQuery AJAX Image Upload.  Bila kita mempunyai kemampuan menggunakan AJAx dengan benar, ini akan akan memberikan manfaat yang sangat luar biasa bagi kita. Pada artikel ini, mari kita belajar bagaimana melakukan upload gambar menggunakan jQuery via AJAX untuk menambahkan sesuatu yang menurut saya luar biasa. JIka menggunakan ajax kita tanpa refresh halaman,

Dalam contoh kali ini, saya akan menunjukkan ikon foto untuk memilih file gambar yang akan diunggah. Pratinjau untuk gambar yang dipilih akan ditampilkan di kotak pratinjau sebelum diunggah. Kemudian, fungsi upload gambar jQuery akan dipanggil pada event klik tombol upload.

Upload gambar HTML
Kode ini menunjukkan ikon foto di tengah kotak pratinjau dan tombol upload. Saat mengklik ikon foto, preview transparan gambar akan ditampilkan di kotak pratinjau. Kemudian, gambar ini akan diupload ke folder pada klik tombol upload. Ini menunjukkan hamparan jendela dengan loader untuk menunjukkan bahwa pengunggahan gambar sedang berlangsung.

Mengunggah Gambar dan Menampilkan Pratinjau menggunakan jQuery AJAX
Script ini berisi fungsi jQuery showPreview (). Ini akan disebut saat memilih file gambar yang akan diunggah. Fungsi ini digunakan untuk menampilkan preview transparan gambar yang dipilih sebelum upload.

Saat mengklik tombol upload, ia mengirimkan data formulir ke PHP melalui jQuery AJAX. Dalam kode PHP, ia mengupload gambar ke folder target dan mengembalikan gambar HTML sebagai respons AJAX. HTML respon AJAX ini akan ditambahkan ke kotak pratinjau.

Oke itulah tadi script Cara Membuat JQuery AJAX Image Upload, untuk lebih jelasnya silahkan teman – teman copy-paste script di atas dan coba sendiri semoga bermanfaat.