Use this jquery progress bar code for uploading file
<script type="text/javascript" language="javascript" src="script/jquery-progress-form.js"></script>
<script>
$(document).ready(function()
{
$("#ajax_up").click(function(){
var options = {
beforeSend: function()
{
$("#progress").show();
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'><div style='height:1000px;'>"+response.responseText+"</div></font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
});
</script>
<style>
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px; padding-bottom:10px; }
#percent { position:absolute;top:3px; left:48%; }
</style>
<h2 style="font-family:Arial, Helvetica, sans-serif;">Upload Image</h2>
<form id="myForm" name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="file" name="image" size="30" id="image" />
<input type="submit" name="upload" value="Upload" class="buttoni2m_1" id="ajax_up" /><br />
</form> <br />
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<div id="message"></div><br />
