How to make a progress bar with ajax?

I'm doing a fileupload with progress bar that shows the percentage of upload but at the time of uploading the file does not show the actual percentage of upload someone can help me

the code I use is the following

with this I upload the file

<script type="text/javascript">
        $(document).ready(function () {
            $("#ContentPlaceHolder1_btnAgregaArchivo").click(function (event) {
              //  var files = $("#FileUpload2")[0].files;
                var files = $("#<%=FileUpload1.ClientID%>").get(0).files;
                if (files.length > 0) {
                    var formData = new FormData();
                    for (var i = 0; i < files.length; i++) {
                        formData.append(files[i].name, files[i]);
                    }

                    var progressbarLabel = $('#progressBar-label');
                    var progressbarDiv = $('#progressbar');

                    $.ajax({
                        url: '../FileUploader.ashx',
                        method: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,                      
                        async: false,

                        success: function () {
                            progressbarLabel.text('completo');                           
                            progressbarDiv.fadeOut(2500);
                        },
                        error: function (err) {
                            alert(err.statusText);
                        }
                    });

                    progressbarLabel.text('Subiendo....');                    
                    progressbarDiv.progressbar({
                        value: false
                    }).fadeIn(500);
                }
            });
        });
    </script>

with this the progress bar is animated

  $(document).ready(function ($) {

        var bar = $('.progress-bar');
        var percent = $('.percent');
        var status = $('#status');

        $('#form1').ajaxForm({
            beforeSend: function () {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            complete: function (xhr) {
                status.html(xhr.responseText);
            }
        });
        });
</script>

Does anyone know a way to do everything in a single script?