下午看了些上传文件 带进度条的
有的很复杂 ,有的说是无刷新 , 可实际还是刷新了 .
谁有好点的 分享下
另外 :说说 进度条的原理 , 我想了下 ,用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 = " "; 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(); document.getElementById("complete").innerHTML = ""; } else { progress_bar.style.visibility = "visible" } } function clearBar() { for (var i = 1; i < 10; i++) { var elem = document.getElementById("block" + i); elem.innerHTML = clear; elem.style.backgroundColor = "white"; } } </script> </head> <body> <form id="form1" action="#"> <h1>Ajax Progress Bar Example</h1> Launch long-running process: <input type="button" value="Launch" id="go" onclick="goo();"/> <table align="center"> <tbody> <tr><td> <div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden"> <span id="block1"> </span> <span id="block2"> </span> <span id="block3"> </span> <span id="block4"> </span> <span id="block5"> </span> <span id="block6"> </span> <span id="block7"> </span> <span id="block8"> </span> <span id="block9"> </span> </div> </td></tr> <tr><td align="center" id="complete"></td></tr> </tbody> </table> </form> </body></html>