Adding a progress bar to jquery function

Question

So, I have following form for my wordpress site:

<form name="upload_video" method="post" enctype="multipart/form-data">  
    <input type="file" name="files[]" class="files" onchange="UploadImage(event);"/>        
    <p id="append_image">
       <div class="append_image"></div>
    </p>    
    <input type="button" class="submit_form" value="submit">
</form>

and I have following function (a part of) to display the image:

function UploadImage(e)
{   
    formdata.append('action', 'UploadImage');
    jQuery.ajax({       
        ////
        ////omitted
        //// 
        beforeSend : function(){
            jQuery('#append_image').html('Uploading...');
        },
        success : function(data){
            jQuery('#append_image').html('');           
        }           
        }
    });
}

In this current set up, when an image is selected, it shows "uploading..." in the id="append_image" section. Upon completion, it disappears as you can see from the function above.

However I want to change "Uploading..." into a progress bar with percentage shown. Does anyone know how I can do that?

Thanks!