How to delete file with jQuery AJAX

On your Client-side with jQuery, JavaScript you cannot delete any files. You need to use Server-side scripting for doing it.

In PHP, you can simply use unlink() function this removed a file from your server if it exists.

Sometimes you have the requirement to delete a resource file without reloading the page. This cannot total done with PHP you need to use jQuery or JavaScript with it by which you need to send AJAX request to your server for removing a file and according to the response make changes on your Client-side.

What in the demonstration ?

For demonstration purpose, I create a number of <img> element with Delete Button. When the Button gets clicked then removing the file using jQuery AJAX and replace the <img> source with the default image.

How to delete file with jQuery AJAX


Contents

  1. unlink()
  2. HTML
  3. CSS
  4. PHP
  5. jQuery
  6. Demo
  7. Conclusion

1. unlink()

This is a PHP function which deletes a file. It returns TRUE when file deleted successfully otherwise FALSE.

Syntax –

unlink( file-name );

You have only to need to pass the file name which you want to remove.

Now you know how to remove a file using PHP. So let’s implement this with jQuery AJAX.


2. HTML

In the HTML created 3 <img > elements and for deleting the image file created <span > elements.

Completed Code

<div class='container'>
 <div class='content'>
  <img src='images/image1.jpg' id='img_1' width='100' height='100'>
  <span id='delete_1'>Delete</span>
 </div>

 <div class='content'>
  <img src='images/image2.jpg' id='img_2' width='100' height='100'>
  <span id='delete_2'>Delete</span>
 </div>

 <div class='content'>
  <img src='images/image2.jpg' id='img_3' width='100' height='100'>
  <span id='delete_3'>Delete</span>
 </div>

</div>

3. CSS

Add some CSS.

Completed Code

.container{
 margin: 0 auto;
}

.content{
 width: 100px;
 float: left;
 margin-right: 5px;
 border: 1px solid gray;
 border-radius: 3px;
 padding: 5px;
}

/* Delete */
.content span{
 border: 2px solid red;
 display: inline-block;
 width: 99%; 
 text-align: center;
 color: red;
}
.content span:hover{
 cursor: pointer;
}

4. PHP

Create a removefile.php file from there removing the image file if it exists.

Completed Code

<?php

$path = $_POST['path'];

$return_text = 0;

// Check file exist or not
if( file_exists($path) ){

// Remove file 
 unlink($path);

// Set status
 $return_text = 1;
}else{

// Set status
 $return_text = 0;
}

// Return status
echo $return_text;

5. jQuery

Performing Delete operation when <span> element clicked inside class=’content’.

Selecting image source on the base of <span> element and sending its source in AJAX request. If the AJAX callback successfully and response equals to 1 then replacing the <img> source with noimage.png.

Completed Code

$(document).ready(function(){

 // Delete
 $('.content span').click(function(){
  var id = this.id;
  var split_id = id.split("_");

  // Selecting image source
  var imgElement_src = $( '#img_'+split_id[1] ).attr("src");
 
  // AJAX request
  $.ajax({
   url: 'removefile.php',
   type: 'post',
   data: {path: imgElement_src},
   success: function(response){
 
    // Changing image source when remove
    if(response == 1){
     $("#img_" + split_id[1]).attr("src","images/noimage.png");
    }
   }
  });
 });
});

6. Demo

Click on the Delete button to see the changes.


7. Conclusion

You can use jQuery AJAX for removing the file, by this way you don’t have the need to reload your whole page. This improves your website user experience.

In this tutorial, I performed delete operation on the image files you can also do this with any other file like pdf, mp3, video, text file, etc .

Note – The unlink() function completely remove the file from your server so make sure before executing the function.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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