Monday, 23 July 2012

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


Step 1.
<html>
<head>
<title>Image upload without refresh page</title>
</head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>//search this file on google
<script type="text/javascript" src="scripts/jquery.form.js"></script> //search this file on google
<script type="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>
<div style="width:600px">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
<br>
<input type="text" id='tt' name='tt'>
</form>
<div id='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";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>


No comments:

Post a Comment