Séléction multiple des fichiers avec barre de chargement

Bonjour, je travaille dans une fonctionnalité permettant de sélectionner plusieurs fichiers, une barre de chargement qui devrait s'afficher ensuite les fichiers ne se charge pas voici mon code
Webform.aspx

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="ProgressBar.WebForm2" %>
 
                <!DOCTYPE html>
 
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head runat="server">
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                    <script src="http://malsup.github.com/jquery.form.js"></script>
                    <link href="jquery-ui.css" rel="stylesheet" />
                     <script type="text/javascript">
                         $(document).ready(function () {
                             //$(document).ready(function () {
                             $("#FileUpload1").change(function () {
                                 var files = $("#FileUpload1")[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: 'UploadHandler.ashx',
                                         type: 'post',
                                         data: formData,
 
                                         beforeSend: function () {
                                             status.fadeOut();
                                             progressbarDiv.width('0%');
                                             progressbarLabel.html('0%');
                                         },
 
                                         /* progress bar call back*/
                                         uploadProgress: function (event, position, total, percentComplete) {
                                             var pVel = percentComplete + '%';
                                             progressbarDiv.width(pVel);
                                             progressbarLabel.html(pVel);
                                         },
 
                                         success: function () {
                                             progressbarLabel.text('Terminé');
                                             progressbarDiv.fadeOut(2000);
                                         },
                                         error: function (err) {
                                             alert(err.statusText);
                                         }
                                     });
 
                                     progressbarLabel.text('Transfert...');
                                     progressbarDiv.progressbar({
                                         value: false
                                     }).fadeIn(500);
                                 }
                             });
                         });
                    </script>
                    <title></title>
                </head>
                <body style="font-family:Arial">
                    <form id="form1" runat="server">
                        Choisir les fichiers : <asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" />
                        <br /><br />
                        <div class="status"  style="width:300px">
                            <div id="progressbar" style="position:relative; display:none">
                                <span id="progressbar-label" style="position:absolute; left:35%; top:20%">Chargement...</span>
                            </div>
                        </div>
                    </form>
                </body>
                </html>

UploadHandler.ashx

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public class UploadHandler : IHttpHandler
{
 
    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                System.Threading.Thread.Sleep(1000);
                HttpPostedFile file = files[i];
                string fileName = context.Server.MapPath("~/Uploads/" + System.IO.Path.GetFileName( file.FileName));
                file.SaveAs(fileName);
            }
        }
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Je précise que le code c# ne contient aucun problème, le problème réside dans le code jquery, j'aimerai dès que la sélection des fichiers soit faite une barre de chargement apparait
Merci d'avance.