上传进度条问题

wyy1001 2007-01-24 10:07:17

帮忙说一下想法：

当我上传文件时，有出一个提示框，提示框里的内容是进度条，根据上传的内容而变化，请问怎么做！

...全文

230 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

wyy1001 2007-01-25

打赏
举报

是winform的，不是web

cnugao 2007-01-25

打赏
举报

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

<!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 type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';
var span_id = "block";
var clear = "   "
var counter;

function createXMLHttpRequest()
{

if (window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e)
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
else
xmlHttp = new XMLHttpRequest();

}

function go() {
createXMLHttpRequest();
checkDiv();
counter=1;
if(xmlHttp)
{
var url = "http://"+location.host+"/progressbar/Handler.ashx?task=create";

var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = function()
{

if (xmlHttp.readyState == 4)
{

if (xmlHttp.status == 200)
{

setTimeout("pollServer()", 2000);

}

}

}

xmlHttp.send(null);
}
}

function pollServer() {
createXMLHttpRequest();
alert(counter);
var url = "http://"+location.host+"/progressbar/Handler.ashx?task=poll&counter="+counter;

xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function()
{
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 < 10)
{
document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
}
}
if (index < 9)
{
counter++;

setTimeout("pollServer()", 2000);

}
else
{

document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}

}
}
}

xmlHttp.send(null);
}

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>
<div>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process: <input type="button" value="Launch" id="go" onclick="go();"/>
</div>
<table align="center" >

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

</table>
</body>
</html>
用xmlhttp异步会简单点，再写个Handler.ashx就能显示进度了

wyy1001 2007-01-25