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> 1 2 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 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 1 2 3 4 5 6 7 8 9 10 11 <style type="text/css"> #remove_button { border-radius: 50%; border: 3px solid #fff; display: block; text-align: center; position: absolute; top: -10px; right: 0px; } </style>
3. Buat form upload gambar di file index.php seperti gambar dibawah index.php 1 2 3 4 5 6 7 8 9 10 <form id="submit_form" method="POST"> <label>Pilih Gambar</label> <div class="form-group"> <input type="file" name="file" id="image_file"/> </div> <input type="submit" name="upload_button" class="btn btn-info" value="Upload" /> </form><hr>
<h3 align="center">Image Preview</h3> <div id="image_preview"></div> 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <script> $(document).ready(function(){ $('#submit_form').on('submit', function(e){ e.preventDefault(); $.ajax({ url:"upload.php", method:"POST", data: new FormData(this), contentType:false, processData:false, success:function(data) { $('#image_preview').html(data); $('#image_file').val(''); } }) }); $(document).on('click', '#remove_button', function(){ if(confirm("Apakah Anda yakin akan menghapus gambar ini?")){ var path = $('#remove_button').data("path"); $.ajax({ url:"delete.php", type:"POST", data:{path:path}, success:function(data){ if(data != ''){ $('#image_preview').html(''); } } }); } else { return false; } }); }); </script> Penjelasan : Pada kode dibawah adalah ajax untuk mengupload data seperti yang sudah saya jelaskan pada postingan tentang upload file menggunakan ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $('#submit_form').on('submit', function(e){ e.preventDefault(); $.ajax({ url:"upload.php", method:"POST", data: new FormData(this), contentType:false, processData:false, success:function(data) { $('#image_preview').html(data); $('#image_file').val(''); } }) }); 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 upload.php 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <?php if($_FILES['file']['name'] != '') { $name = explode(".", $_FILES['file']['name']); $extension = $name[1]; $allowed_type = array("jpg", "jpeg", "png", "gif");
if(in_array($extension, $allowed_type)) { $new_name = rand() . "." . $extension; $path = "upload/" . $new_name; if(move_uploaded_file($_FILES['file']['tmp_name'], $path)) { echo ' <div class="row" align="center"> <div class="col-md-12"> <img src="'.$path.'" class="img-responsive" width="100%" /> <button type="button" data-path="'.$path.'" id="remove_button" class="btn btn-danger"> X </button> </div> </div> '; } } else { echo '<script>alert("Invalid File Format")</script>'; } } else { echo '<script>alert("File tidak boleh kosong")</script>'; } ?>
6. Kemudian buat file hapus.php untuk menyimpan perintah hapus gambar saat klik tombol hapus dan isikan dengan kode dibawah 1 2 3 4 5 6 7 8 9 <?php if(!empty($_POST["path"])) { if(unlink($_POST["path"])) { echo 'Gambar Berhasil Dihapus'; } } ?>
7. Jalankan project https://dewankomputer.com/2019/02/15/cara-mengupload-dengan-hapus-gambar-menggunakan-ajax-dan-php/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. |
Cara menggunakan menghapus gambar php
Pos Terkait
Copyright © 2024 kemunculan Inc.
