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>
<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