上传文件进度条解决方法-ASP.NET教程-爱易网页

上传文件进度条解决方法

日期：2014-05-17　浏览次数：20372 次

上传文件进度条
下午看了些上传文件带进度条的

有的很复杂 ,有的说是无刷新 , 可实际还是刷新了 .

谁有好点的分享下

另外 :说说进度条的原理 , 我想了下 ,用ajax 以流的方式上传 ,可还有些没想明白

大家说说 .

------解决方案--------------------
原理可以看看下面的例子： (具体实例还没弄过)

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Ajax Progress Bar</title>
    <script type="text/javascript">
        var xmlHttp;
        var key;
        var bar_color = 'gray';
        var span_id = "block";
        var clear = "&nbsp;&nbsp;&nbsp;";
        function createXMLHttpRequest()
         {
            if (window.ActiveXObject)
             {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest) 
            {
                xmlHttp = new XMLHttpRequest();                
            }
        }
        function goo()
         {
            alert("a");
            createXMLHttpRequest();
            checkDiv();
            var url = "ProgressBar.ashx?task=create";
            var button = document.getElementById("go");
            button.disabled = true;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = goCallback;
            xmlHttp.send(null);
            alert("a")
        }

        function goCallback() {
            if (xmlHttp.readyState == 4) 
            {
                if (xmlHttp.status == 200)
                 {
                    setTimeout("pollServer()", 2000);
                }
            }
        }
        
        function pollServer() {
            createXMLHttpRequest();
            var url = "ProgressBar.ashx?task=poll&key=" + key;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.send(null);
        }
        
        function pollCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
                    
                    var index = processResult(percent_complete);
                    for (var i = 1; i <= index; i++) {
                        var elem = document.getElementById("block" + i);
                        elem.innerHTML = clear;

                        elem.style.backgroundColor = bar_color;
                        var next_cell = i + 1;
                        if (next_cell > index && next_cell <= 9) {
                            document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
                        }
                    }
                    if (index < 9) {
                        setTimeout("pollServer()", 2000);
                    } else {
                        document.getElementById("complete").innerHTML = "Complete!";
                        document.getElementById("go").disabled = false;
                    }
                }
            }
        }
        
        function processResult(percent_complete) {
            var ind;
            if (percent_complete.length == 1) {
                ind = 1;
            } else if (percent_complete.length == 2) {
                ind = percent_complete.substring(0, 1);
            } else {
                ind = 9;
            }
            return ind;
        }

        function checkDiv() {
            var progress_bar = document.getElementById("progressBar");
            if (progress_bar.style.visibility == "visible") {
                clearBar()

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

上传文件进度条解决方法

相关资料更多>

推荐阅读更多>

上传文件 进度条解决方法

相关资料更多>

推荐阅读更多>

上传文件进度条解决方法