Cara Menambahkan dan Menghapus gambar Menggunakan PHP dan jQuey

Cara Menambahkan dan Menghapus gambar Menggunakan PHP dan jQuey, berfungsi apabila kita ingin meng-upload sebuah gambar, ketika ada kesalahan dalam meng-upload gambar tersebut kita bisa menghapus gambar tersebut sebelum kita meng-upload gambar tersebut kedalam database.

Untuk membuat Cara Menambahkan dan Menghapus gambar Menggunakan PHP dan jQuey langkah pertama kita akan membuat file index nya dan silahkan teman-teman simpan script dibawah ini dengan nama index.php

<html>
<head>
	<title>Cara Menambahkan dan Menghapus gambar Menggunakan PHP dan jQuey </title>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#target").html(data);
            },
              error: function(){}             
       });
    }));    
});
function deleteImage(path) {
    $.ajax({
        url: "hapus.php",
        type: "POST",
        data:  {'path':path},
        success: function(data){
            $("#target").html('<div class="no-image">No Image</div>');
        },
        error: function(){}             
    });
}
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
		<form id="uploadForm" action="upload.php" method="post">
			<div id="target">
				<div class="no-image">No Image</div>
			</div>
		<div id="upload">
			<label>Upload Image File:</label><br/>
			<input name="userImage" type="file" class="file" />
			<input type="submit" value="Submit" />
		</form>
	</div>
</div>
</body>
</html>

Setelah kita membuat file index nya berikutnya kita akan membuat file CSS nya untuk mengatur layout nya dan silhkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css

.container {
width: 450px;
height:100px;
background-color: #57d409;
color: #000;
padding: 2px;
}

#target{
float:right;
width:100px;
height:100px;
text-align:center;
font-weight: bold;
color: #C0C0C0;
background-color: #F0E8E0;
position:relative;
}
#upload{
float:right;
padding: 10px;
}

.file {
padding: 3px;
background-color: #FFFFFF;
}

.image-container {
	display:inline-block;
	position:relative;
}
.delete {
	position: absolute;
    right: 30px;
    top: 30px;
    border: #FFF 4px solid;
    border-radius: 50%;
    padding: 7px 10px;
    display: none;
    cursor: pointer;
    opacity: 0.6;
    color: #FFF
}
.image-container:hover .delete{display:inline-block;}
.no-image {
	display: inline-block;
    position: absolute;
    right: 18px;
    top: 40px;
}

Berikutnya kita akan membuat proses untuk upload gambar nya dan silahkan teman-teman simpan script dibawah ini dengan nama upload.php

<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "images/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
	<div class="image-container">
		<img src="<?php echo $targetPath; ?>" width="100px" height="100px"  />
		<div class="delete" onClick="deleteImage('<?php echo $targetPath; ?>')">X</div>
	</div>
<?php } } } ?>

Setelah kita membuat proses uploadnya yang terakhir kita akan membuat proses untuk hapus gambarnya, dan silahkan teman-teman simpan script dibawah ini dengan nama hapus.php

<?php
if(!empty($_POST["path"])) {
	unlink($_POST["path"]);
}
?>

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini, dan ketika kursor kita arahkan pada gambar maka akan muncul tanda X, dan apabila tanda X tersebut kita klik maka gambarnya secara otomatis akan terhapus.

Oke teman-teman sekian dulu tutorial saya kali ini tentang Cara Menambahkan dan Menghapus gambar Menggunakan PHP dan jQuey

Semoga Bermanfaat

Terimakasih.