Tutorial cara upload foto dengan AJAX jQuery dan PHP | Website yang interaktif dan responsif saat ini sudah menjadi sebuah keharusan, website yang bisa digunakan secara efektif sangat disukai oleh pengunjung. Oleh sebab itu kecepatan sangat penting untuk diperhatikan oleh setiap pemilik website.
Salah satu kebutuhan lain yang sering ada di aplikasi website adalah fitur yang memungkinkan pengguna untuk mengupload gambar atau foto, baik itu untuk kebutuhan melengkapi artikel, melengkapi foto profil atau membuat galeri foto.
Tentu akan sangat menyenangkan jika pengguna bisa melakukan upload foto dengan lebih ringkas dan efektif dengan memanfaatkan teknologi AJAX (Asynchronous JavaScript and XML), sehingga pengunjung tidak perlu untuk berpindah halaman, tidak perlu adanya refresh dan tidak perlu merasakan loading.
– Baca juga: Keuntungan dan kerugian menggunakan AJAX pada website
Cara Upload Gambar dengan AJAX dan PHP
Pada kesempatan sebelumnya kita sudah pernah membahas bagaimana cara upload file gambar dengan PHP saja, nah pada kesempatan kali ini Jurnalweb.com akan membahas bagaimana cara upload foto dengan PHP dan AJAX. Bantuan jQuery sangat memudahkan kita dalam pembuatan fitur seperti ini.
Buat Form Upload
Pertama buat terlebih dahulu form untuk upload dan sebuah lokasi untuk tempat menaruh gambar yang sudah di upload nantinya.
Desain tampilan dengan CSS
Setelah membuat wadah upload foto, kita selanjutnya mempercantik wadah upload tersebut dengan bantuan CSS agar terlihat lebih menarik dan teratur.
Tambahkan Script jQuery Ajax
Sisipkan terlebih dahulu script jQuery pada bagian [head], Lalu karena kita akan mengupload foto tersebut dengan AJAX sehingga tidak ada transisi berpindah halaman atau refresh, maka kita perlu tambahkan script jQuery untuk melakukan hal tersebut, yaitu untuk mengirim form ke file upload.php. Taruh script ini dibagian header, tepat setelah jquery di load.
Script PHP untuk proses upload
Script ini untuk menangani file yang dikirim lewat form dengan bantuan jQuery Ajax agar bisa dilakukan proses upload. Karena untuk keperluan upload file ini kita sangat memerlukan PHP. File yang sudah diupload akan disimpan pada direktori images, kemudian ditampilkan dengan tag img src
di html.
Download
Jika Anda tertarik ingin melihat script lengkapnya dan mencobanya langsung, Anda bisa download dan taruh di server Anda untuk mencobanya.
Semoga bermanfaat, lain kali kita akan lanjutkan dan lengkapi tutorial ini dengan proses delete yang juga dilakukan dengan AJAX.
cieeee penggemarnya raisa
Permisi, saya mau tanya.
Kalau terapkan di blogspot kenapa tidak bisa ya ? Tidak bisa ini saya maksud dengan ketika script php untuk proses upload dipasangkan akan terjadi error saat disave. Namun jika script itu tidak di terapkan maka berjalan, namun ketika setelah memilih file yang akan diupload dan di klik upload maka error akan terjadi juga.
Sekian pertanyaan dari saya, terimakasih.
PS: errornya tidak memperbolehkan “<" pada tag " img src"
Blogspot memang tidak membolehkan kita menjalankan script tersebut