progress bar for uploading file in php

1<form id="uploadForm" action="upload.php" method="post">
2    <div>
3        <label>Upload Image File:</label>
4        <input name="userImage" id="userImage" type="file" class="demoInputBox" />
5    </div>
6    <div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
7    <div id="progress-div"><div id="progress-bar"></div></div>
8    <div id="targetLayer"></div>
9</form>
10<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>
11          
12          
13          $(document).ready(function() { 
14    $('#uploadForm').submit(function(e) {	
15        if($('#userImage').val()) {
16            e.preventDefault();
17            $('#loader-icon').show();
18            $(this).ajaxSubmit({ 
19                target:   '#targetLayer', 
20                beforeSubmit: function() {
21                    $("#progress-bar").width('0%');
22                },
23                uploadProgress: function (event, position, total, percentComplete){	
24                    $("#progress-bar").width(percentComplete + '%');
25                    $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
26                },
27                success:function (){
28                    $('#loader-icon').hide();
29                },
30                resetForm: true 
31            }); 
32            return false; 
33        }
34    });
35});
36