PHP jQuery AJAX Image Upload Script download and use it!

Are you searching for an Image upload script without refreshing the page in PHP?. Then you are at the right place!.
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:

http://jquery.malsup.com/form/#download

The above plugin can be used it many other applications. Just go through the documentation and the demo link in it.

Lets 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="http://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, where as this back-end file is little huge because I’m validating the image format and the size and the other stuffs. 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: http://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!.

DemoDownload

 

11 Comments

Leave a Reply