Are you searching for an Image upload script without refreshing the page in PHP?. Then you are at the right place!.
The script that works in all the browsers. This script gonna be amazingly useful for your project.
NOTE: You can download the script at the bottom of the page!
For this upload script, we are using jQuery form Plugin – (jquery.form.js)
You can download this script from this link:
https://jquery.malsup.com/form/#download
The above plugin can be used in many other applications. Just go through the documentation and the demo link in it.
Let’s come to our upload image script.
Can you just believe we are just going to write only 10 lines of jQuery script to do this?. Just look at the below code:
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').change(function(){
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
Now see the entire front end script how it looks like:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Ajax Upload PHP Script - Theonlytutorials.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').change(function(){
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
</head>
<body>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<span id="pimg"><input type="file" id="photoimg" name="photoimg" /></span>
</form>
<div id='preview' align="center" >
</div>
</body>
</html>
And here is the upload script. This is just normal PHP upload script, whereas this back-end file is a little huge because I’m validating the image format and the size and the other stuff. Just read the green line comments to understand the script.
<?php
error_reporting(0);
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$path = "uploads/"; //set your folder path
$filename = $_FILES['photoimg']['tmp_name']; //get the temporary uploaded image name
$valid_formats = array("jpg", "png", "gif", "bmp", "jpeg","GIF","JPG","PNG"); //add the formats you want to upload
$name = $_FILES['photoimg']['name']; //get the name of the image
$size = $_FILES['photoimg']['size']; //get the size of the image
if(strlen($name)) //check if the file is selected or cancelled after pressing the browse button.
{
list($txt, $ext) = explode(".", $name); //extract the name and extension of the image
if(in_array($ext,$valid_formats)) //if the file is valid go on.
{
if($size < 2098888) // check if the file size is more than 2 mb
{
$actual_image_name = str_replace(" ", "_", $txt)."_".time().".".$ext; //actual image name going to store in your folder
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name)) //check if it the file move successfully.
{
//display the image after successfully upload
echo "<img src='uploads/".$actual_image_name."' class='preview'> <input type='hidden' name='actual_image_name' id='actual_image_name' value='$actual_image_name' />";
}
else
{
echo "failed";
}
}
else
{
echo "Image file size max 2 MB";
}
}
else
{
echo "Invalid file format..";
}
}
else
{
echo "Please select image..!";
}
exit;
}
?>
I have not used any CSS style for this script. If you want you can add yourself.
Secure your ‘uploads’ folder. Learn how to here: https://blog.theonlytutorials.com/learn-prevent-executing-php-file-folder-directory/
For your convenience, I have given the demo and download links below. Enjoy the day!.
I wish ask how to insert delete button for uploaed image. I think is usefull to user to delete image if he made a mistake. What code is necessary to add? Thanks.
You need to store the image info (imagename) in the database to do that..This code just demonstrates how to upload image without refreshing the page!. To do that just add the database connection code and insert query in ‘ajaximage.php’ and store the image name in a table.
Then you can fetch the image name from the table and delete the file from using ‘unlink()’ function. eg.,unlink(‘myimage123.jpg’)
Thank you agurchand. I try to do as you said. Hi
Wonderful job, I LOVE this tool!
I don’t how to thank you… This has really helped me out a lot. I was stuck at this for quite some time and finally found your well defined and explained solution. Thanks a million.
Check this image uploader
Great, Nice Idea you have done in your website!
list($txt, $ext) = explode(“.”, $name);
what about this?
“example.file.name.jpg”
Good question. You can also use pathinfo() and basename() to get the extension and filename.
Here you are:
//this code give you extension
$ext = pathinfo($_FILES[‘photoimg’][‘name’], PATHINFO_EXTENSION);
//this code give you filename
$name = basename($_FILES[‘photoimg’][‘name’], “.$ext”);
usage:
echo $name.”somerandom.”.$ext;
Hello Agurchand,
Thanks for great tutorial. Anyway, do you have any idea why i got stuck at “Uploading” ?
Cheers!
thanks bro udah mau share…
beginilah indahnya berbagi 🙂