Tutorial kita kali ini membahas tentang upload gambar dengan menggunakan PHP dan JQuery. JQuery akan digunakan di client side, dimana kita akan membuat proses upload secara asynchronous (tanpa mereload halaman) dan PHP di server side untuk memproses file yang kita upload tersebut. PersiapanPertama kita akan membuat sebuah folder dengan nama ajax-upload di local server kamu. Jika kamu menggunakan XAMPP atau MAMP kamu bisa buat di dalam folder htdocs. Adapun susunan directory dan file dalam tutorial kita kali ini adalah:
Jika kalian sudah membuat directory dan file seperti di atas. Kita lanjut ke step selanjutnya. index.phpindex.php adalah file yang berfungsi sebagai halaman utama dari sistem yang kita buat. Ayuk kita mulai ngoding.
Sedikit penjelasan tentang isi dari file index.php di atas bisa kita bagi menjadi beberapa part utama yaitu:
Menampilkan gambar gambar yang sudah ada di folder uploadsUntuk menampilkan gambar dalam folder upload kita akan menggunakan fungsi
Kemudian, di dalam div image-place kita akan tambahkan script di bawah ini untuk menampilkan gambar yang ada dalam folder uploads.
Sekarang coba kita buka file index.php yang sudah di buat di browser kamu, misalnya dengan membuka upload.phpupload.php berfungsi untuk memproses gambar yang sudah kita upload tadi sehingga tersimpan ke dalam folder uploads.
Return dari file upload.php kita akan buat dalam format json supaya lebih gampang untuk di proses nanti dalam file main.jsSekarang saatnya kita ngoding javascript agar saat user memilih file lewat form yang sudah kita buat, maka sistem akan otomatis mengupload gambar tersebut dan jika proses upload berhasil maka gambar yang dari di upload akan secara otomatis bertambah di div image-place tersebut. Lets code!
Kita hampir selesai dengan tutorial kali ini. Mungkin ada sedikit penjelasan lebih detail di bagian ajax saat form tersebut di submit.
Kita hampir selesai dengan tutorial upload gambar dengan PHP dan JQuery, sekarang saatnya kita mencobanya di browser kesukaan kalian masing-masing. File yang kamu pilih akan secara otomatis ter-upload dan terlist di sebelah bawah. Silakan kalian coba dan jika ada pertanyaan bisa isi kolom komentar di bawah. Happy coding! |