asp net多文件上传进度条

时间:2015-10-27 17:19:37

标签: c# jquery asp.net ajax progress-bar

嗨我正在使用一个应该允许选择多个fileupload的代码,当上传文件时,它应该显示一个带有加载百分比的进度条

这是我的代码

Webform.aspx

 <%@ 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

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;
        }
    }
}

它不起作用,进度条没有出现,文件没有存储在Uploads目录

0 个答案:

没有答案
相关问题