无需 AJAX 的文件上传进度条

Nilesh Thakkar

2.20/5 (11投票s)

2007年8月8日

2分钟阅读

123085

3206

本文展示了如何在ASP.NET应用程序中实现简单的JS进度条。

下载 SampleProgressBar.zip - 26.7 KB

引言

在我的一个项目中，有一个需求是在文件上传期间显示一个进度条。如果我们使用Update Panel，这很容易实现AJAX。但我的应用程序没有AJAX启用。所以我必须创建一个简单的JavaScript进度条。我在互联网上搜索并找到了一些有用的java脚本。我收集了所需的代码并开始使用它。最后，我制作了一个简单易于实现的进度条。在这里，我使用了简单的Form，当您的服务器端文件上传过程正在进行时，可以显示该Form。在这个例子中，我还展示了可以用于上传文件的不同类型的验证。例如：文件大小、文件类型、文件已存在于目标文件夹等。

使用代码

按照以下步骤将简单的进度条实现到您的应用程序中。

1. 将以下代码块添加到您的aspx页面的Head部分

<head runat="server">
    <title>Simple Progress bar</title> 
    <style>
<!-- 
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>
</head>

请记得使用语言下拉菜单设置代码片段的语言。

2. 然后将以下脚本添加到您的aspx页面的顶部。

<script script language="javascript" type="text/javascript">    
    var duration=2 // Specify duration of progress bar in seconds
    var _progressWidth = 100;    // Display width of progress bar
    var _progressBar = new String("»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»");
    var _progressEnd = 10;
    var _progressAt = 0;

    // Create and display the progress dialog.
    // end: The number of steps to completion
    function ProgressCreate(end) {
        // Initialize state variables
        _progressEnd = end;
        _progressAt = 0;

        // Move layer to center of window to show
        if (document.all) {    // Internet Explorer
            progress.className = 'show';           
            progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
            progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);            
        } else if (document.layers) {    // Netscape
            document.progress.visibility = true;
            document.progress.left = (window.innerWidth/2) - 100;
            document.progress.top = pageYOffset+(window.innerHeight/2) - 40;
        } else if (document.getElementById) {    // Netscape 6+
            document.getElementById("progress").className = 'show';
            var l = (window.innerWidth/2) - 100;
            var t = pageYOffset + (window.innerHeight/2) - 40;
            document.getElementById("progress").style.left = l + "px";
            document.getElementById("progress").style.top = t + "px";
//            document.getElementById("progress").style.left = (window.innerWidth/2) - 100;
//            document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40;
//          Above 2 lines modified by Nilesh Thakkar on 23-July-2007
        }

        ProgressUpdate();    // Initialize bar
    }

    // Hide the progress layer
    function ProgressDestroy() {
        // Move off screen to hide
        if (document.all) {    // Internet Explorer
            progress.className = 'hide';
        } else if (document.layers) {    // Netscape
            document.progress.visibility = false;
        } else if (document.getElementById) {    // Netscape 6+
            document.getElementById("progress").className = 'hide';
        }
    }

    // Increment the progress dialog one step
    function ProgressStepIt() {
        _progressAt++;
        if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
        ProgressUpdate();
    }

    // Update the progress dialog with the current state
    function ProgressUpdate() {
        var n = (_progressWidth / _progressEnd) * _progressAt;
        if (document.all) {    // Internet Explorer
            var bar = document.all["dialog"].document.getElementById("bar");
            //var bar = dialog.bar;
            //Above line is modified by Nilesh on 23-July-2007
         } else if (document.layers) {    // Netscape         
            var bar = document.layers["progress"].document.forms["dialog"].bar;
            n = n * 0.55;    // characters are larger
        } else if (document.getElementById){        
                    var bar=document.dialog.bar
            }
        var temp = _progressBar.substring(0, n);
        bar.value = temp;
    }

    // Demonstrate a use of the progress dialog.
    function Demo() {
        ProgressCreate(10);
        window.setTimeout("Click()", 100);
    }

    function Click() {
        if(_progressAt >= _progressEnd) {
            ProgressDestroy();
            return;
        }
        ProgressStepIt();
        window.setTimeout("Click()", (duration-1)*1000/10);
    }

    function CallJS(jsStr) { 
      return eval(jsStr);
      //return true;
    }
</script>

3. 然后将下面的脚本块添加到您的aspx页面的底部。
首先，我尝试将下面的脚本块与上面的脚本块一起放在页面顶部，但它没有正常工作，所以我尝试将其放在页面底部，在Forms标签之前，它就起作用了。我不知道原因，如果有人知道了，请更新我。

<script language="JavaScript" type="text/javascript">

// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=\"dialog\" id=\"dialog\">");
document.write("<TABLE border=2 style=\"background-color:Navy;\" >");
document.write("<TR><TD ALIGN=\"center\" style=\"FONT-FAMILY:trebuchet ms; PADDING:0px; FONT-WEIGHT:bold; COLOR:white;\">");
document.write("Please wait<BR>");
document.write("<input type=label name=\"bar\" value=\"Please Wait.........\" size=\"" + _progressWidth/2 + "\"");
if(document.all || document.getElementById)  // Microsoft, NS6
  document.write(" bar.style=\"color:navy;\">");
else // Netscape
  document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides 

</script>

4. 现在，您的脚本部分已经完成。现在将文件上传控件添加到您需要的地方，并添加上传按钮，如下所示。

<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="btnUpload" runat="server" Text="Upload File" OnClick="btnUpload_Click" OnClientClick="return CallJS('Demo()');" />

5. 现在，您的aspx页面端的工作已经完成。您可以编写服务器端代码以在适当的位置上传和保存您的文件。您可以下载代码并实现它。

欢迎您的指导和建议。