Upload file/image without refresh page with the help of ajax and validate extension.
file upload with progress bar
jquery upload file with progress bar
jquery upload file with progress bar
Step 1.
<html>
<head>
<title>Image upload without refresh page</title>
</head>
<scripttype=“text/javascript”src=“scripts/jquery.min.js”></script>//search this file on google
<scripttype=“text/javascript”src=“scripts/jquery.form.js”></script> //search this file on google
<scripttype=“text/javascript”>
$(document).ready(function() {
$(‘#photoimg’).live(‘change’, function(){
$(“#preview”).html(”);
$(“#preview”).html(‘<img src=”loader.gif” alt=”Uploading….”/>’); //download load loading image
$(“#imageform”).ajaxForm({
target: ‘#preview’
}).submit();
});
});
</script>
<style>
body
{
font-family:arial;
}
.preview
{
width:200px;
border:solid 1px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:12px
}
</style>
<body>
<divstyle=”width:600px“>
<formid=“imageform”method=“post”enctype=“multipart/form-data”action=‘ajaximage.php’>
Upload your image <inputtype=“file”name=“photoimg”id=“photoimg”/>
<br>
<inputtype=“text”id=‘tt’name=‘tt’>
</form>
<divid=‘preview’>
</div>
</div>
</body>
</html>
Step 2.
<?php
$path = “img/”; // set image upload path
$valid_formats = array(“.jpg”, “.png”, “.gif”, “.bmp”); // set formate
if(isset($_POST) and $_SERVER[‘REQUEST_METHOD’] == “POST”)
{
//echo $name = $_POST[‘tt’];//use to image description. and you can do also save in database.
$name = $_FILES[‘photoimg’][‘name’];
$size = $_FILES[‘photoimg’][‘size’];
if(strlen($name))
{
$fileExt = substr(strrchr($name, ‘.’), 0);
if(in_array($fileExt,$valid_formats))
{
if($size<(1024*1024))
{
$actual_image_name = time().substr(str_replace(” “, “_”, $txt), 5).“.”.$ext; // create image unique name
$tmp = $_FILES[‘photoimg’][‘tmp_name’];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
// you can fire query for insert image discription or more fields whoes you create in form.
echo “<img src=’img/”.$actual_image_name.“‘ class=’preview’>”;
}
else
echo “failed”;
}
else
echo “Image file size max
1 MB”;
1 MB”;
}
else
echo “Invalid file format..”;
}
else
echo “Please select image..!”;
exit;
}
?>
