如何使用更新进度在使用文件上载控件上载文件时显示进度条

问题描述：

如何在使用fileupload控件上传文件时显示进度条的进度？

i写的代码就像这个文件正在上传但是进度条没有显示进度..

aspx文件中的代码：

How can i show the progress with the progress bar while uploading the file with fileupload control?
i wrote the code like this file is uploading but progress bar is not showing the progress..

Code in the aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="updprogress.aspx.cs" Inherits="updprogress" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
    <script src="scripts/JScript.js" type="text/javascript"></script>

    <style type="text/css">
        .style1
        {
            width: 254px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <%-- <Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>--%>
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
                <asp:FileUpload ID="FileUpload1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
        <ProgressTemplate>
        <img src="images/progressbar.jpg" height="40px" width="50"  />

        </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

cs文件中的代码：

Code in cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class updprogress : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void UpdateButton_Click(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

        System.Threading.Thread.Sleep(3000);
        FileUpload1.SaveAs(Server.MapPath("~/" + FileUpload1.FileName));
        Button1.Text = "uploaded successfully";
    }
}



Code in the script file:


var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack())
        args.set_cancel(true);
    postBackElement = args.get_postBackElement();

    if (postBackElement.id == 'Button1')
        $get('UpdateProgress1').style.display = 'red';
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Button1')
        $get('UpdateProgress1').style.display = 'none';
}

答

get（' UpdateProgress1'）。style.display = ' red';
}
函数EndRequest（sender，args）{
if （postBackElement.id == ' Button1'）

get('UpdateProgress1').style.display = 'red'; } function EndRequest(sender, args) { if (postBackElement.id == 'Button1')

get（' UpdateProgress1'）。style.display = ' none 跨度>;
}

get('UpdateProgress1').style.display = 'none'; }

尝试将以下两个属性提供给更新面板。

Try giving below two attributes to your update panel.

ChildrenAsTriggers="true" UpdateMode="Conditional"

如何使用更新进度在使用文件上载控件上载文件时显示进度条

相关推荐