Mobile
Search
Contact Me
Add Delete Image via jQuery AJAX
Last modified on January 25th, 2017 by Vincy.
Images can be added or deleted using jQuery and PHP script via AJAX. In a previous tutorial, we have seen examples like PHP AJAX image upload and multiple image upload. But in those examples, we didn’t have a delete option.
In image add, we call PHP file upload script to upload the chosen image into a target folder. While deleting, we call PHP to remove the image file from the folder. We use PHP unlink() to remove the file by specifying a target path.
Image Add Script for Uploading Image File
This jQuery script is for invoking PHP file upload script for adding files to a target. On successful image file upload, this script will show the image to the browser. This image element is constructed in PHP and returned as an AJAX response.
$("#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)
{
$("#targetLayer").html(data);
},
error: function(){}
});
}));
jQuery AJAX Image Delete
This jQuery script is containing AJAX method to call PHP Image delete code. In PHP we use in-built unlink() method to delete the image with the reference of its path. Once the file is deleted, then the image element is replaced by a no-image text. The code is,
function deleteImage(path) {
$.ajax({
url: "delete.php",
type: "POST",
data: {'path':path},
success: function(data){
$("#targetLayer").html('<div class="no-image">No Image</div>');
},
error: function(){}
});
}
