Add Delete Image via jQuery AJAX

jQuery image add or delete can be achieved by calling a PHP script via AJAX. In previous tutorial we have seen examples like PHP AJAX image upload and multiple image upload. But in those example we didn’t have 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 file by specifying 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) {
		url: "upload.php",
		type: "POST",
		data:  new FormData(this),
		contentType: false,
		cache: false,
		success: function(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 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) {
		url: "delete.php",
		type: "POST",
		data:  {'path':path},
		success: function(data){	
			$("#targetLayer").html('<div class="no-image">No Image</div>');
		error: function(){} 	        


This jQuery code tutorial was published on August 4, 2016.

↑ Back to Top