上传文件 进度条解决方法
日期：2014-05-17 浏览次数：20390 次
上传文件 进度条
下午看了些上传文件 带进度条的
有的很复杂 ,有的说是无刷新 , 可实际还是刷新了 .
谁有好点的 分享下
另外 :说说 进度条的原理 , 我想了下 ,用ajax 以流的方式上传 ,可还有些没想明白
大家说说 .
------解决方案--------------------
原理可以看看下面的例子： (具体实例还没弄过)
下午看了些上传文件 带进度条的
有的很复杂 ,有的说是无刷新 , 可实际还是刷新了 .
谁有好点的 分享下
另外 :说说 进度条的原理 , 我想了下 ,用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()
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
