In this post we are going to learn how to upload image or file to server using php without page refresh using jquery with ajax and if you want to remove uploaded image from the server using php with jquery ajax without page refresh. Here I have called php upload script via ajax function. In PHP upload script I have select image or file by using html file element and in PHP script I have rename uploaded image or file and by using PHP function like move_uploaded_file() and with help of this function I have upload file or image to folder. For calling php script I have used Jquery Ajax function call. I have used form submit Jquery event and in this I have called Ajax function.
For remove image from server I have also used PHP script for deleting uploaded image from the server. For calling php script I have also used ajax function. By using this Jquery Ajax image will be delete from the server without the page refresh. For delete Image from server, In PHP script I have used unlink() PHP function for removed Image or file from server. This all things I have describe in this my PHP Video Tutorial for web development.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | PHP Upload & Remove using Ajax Jquery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<form id="submit_form" action="upload.php" method="post">
<div class="form-group">
<label>Select Image</label>
<input type="file" name="file" id="image_file" />
<span class="help-block">Allowed File Type - jpg, jpeg, png, gif</span>
</div>
<input type="submit" name="upload_button" class="btn btn-info" value="Upload" />
</form>
<br />
<h3 align="center">Image Preview</h3>
<div id="image_preview">
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#submit_form').on('submit', function(e){
e.preventDefault();
$.ajax({
url:"upload.php",
method:"POST",
data:new FormData(this),
contentType:false,
//cache:false,
processData:false,
success:function(data)
{
$('#image_preview').html(data);
$('#image_file').val('');
}
})
});
$(document).on('click', '#remove_button', function(){
if(confirm("Are you sure you want to remove this image?"))
{
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>
upload.php
<?php
if($_FILES['file']['name'] != '')
{
$extension = end(explode(".", $_FILES['file']['name']));
$allowed_type = array("jpg", "jpeg", "png", "gif");
if(in_array($extension, $allowed_type))
{
$new_name = rand() . "." . $extension;
$path = "images/" . $new_name;
if(move_uploaded_file($_FILES['file']['tmp_name'], $path))
{
echo '
<div class="col-md-8">
<img src="'.$path.'" class="img-responsive" />
</div>
<div class="col-md-4">
<button type="button" data-path="'.$path.'" id="remove_button" class="btn btn-danger">x</button>
</div>
';
}
}
else
{
echo '<script>alert("Invalid File Formate")</script>';
}
}
else
{
echo '<script>alert("Please Select File")</script>';
}
?>
delete.php
<?php
//delete.php
if(!empty($_POST["path"]))
{
if(unlink($_POST["path"]))
{
echo 'Image Deleted';
}
}
?>
thanku so much...........
ReplyDeleteI am getting HTTP server error 500 in upload.php when I am executing this code.
ReplyDelete