Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP – Hai ketemu lagi dengan saya dewan komputer dan setelah sebelumnya saya membahas tentang upload gambar dengan ajax dan upload gambar dari url. Pada kesempatan kali ini saya akan membahas tentang upload gambar dengan menyertakan pula tombol hapus/remove gambar untuk membatalkan gambar yang diupload. Caranya uploadnya sama seperti sebelumnya hanya saja pada kali ini diberi tambahan tombol hapus saja. Caranya adalah seperti berikut

1. Untuk mempercantik tampilan saya menggunakan bootstrap dan yang paling penting kita membutuhkan jquery karena kita akan menggunakan ajax. Masukkan kode dibawah pada tag <head>

karena untuk keperluan demo jadi saya menggunakan css dan js online namun jika sobat ingin menggunakan untuk development maka sobat perlu mendownloadnya terlebih dahulu atau download bersama project ini di akhir postingan.

 

2. Buat css untuk tombol hapusnya agar berada pada pojok kanan atas dari gambar, kode cssnya adalah seperti berikut

 

3. Buat form upload gambar di file index.php seperti gambar dibawah

Panjelasan :

kode <div id=”image_preview”></div>  berfungsi untuk menampilkan hasil gambar yang telah diupload menggunakan metode ajax.

 

4. Tambahkan script dibawah pada file index.php di tag <body> paling bawah

Penjelasan :

Pada kode dibawah adalah ajax untuk mengupload data seperti yang sudah saya jelaskan pada postingan tentang upload file menggunakan ajax

Sedangkan pada kode dibawah adalah kode untuk menghapus gambarnya nanti setelah berhasil diupload

 

5. Buat upload.php yang berguna untuk menyimpan kode upload gambarnya dan menampilkan pada div dengan id=’image_preview’ dan isikan dengan kode dibawah ini

 

6. Kemudian buat file hapus.php untuk menyimpan perintah hapus gambar saat klik tombol hapus dan isikan dengan kode dibawah

 

7. Jalankan project maka akan jadi seperti gambar dibawah

Jika sobat pilih gambarnya dan klik upload maka akan muncul gambar preview dengan tombol hapus seperti dibawah

Dan pada folder project sobat akan muncul folder upload dengan isinya seperti berikut

 

Tentunya pada contoh kali ini tidak bisa sobat copas saja ke project atau aplikasi sobat yang sedang dibuat. Tentunya harus menyesuaikan dengan kebutuhan. Jika sobat upload menggunakan database tentunya sobat juga menambahkan perintah untuk simpan pada database di file upload.php untuk menyimpan dan pada hapus.php untuk menghapusnya.  Sekian postingan saya tentang Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan apabila ada salah-salah saya mohon maaf. Kunjungi juga postingan saya yang lain siapa tahu ada yang berhubungan dengan project sobat juga.

Baca juga :

Cara membuat Crop and Upload Menggunakan Ajax pada PHP

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP

Cara Membuat Upload dan Ekstrak Zip pada PHP

Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

 

5 thoughts on “Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *

two × 4 =