javascript 在读取文件的时候，如何显示进度条？

[yygyogfny]

比如我有一个button 在click 的时候，调用一个叫readfile()的js函数，但对readfile()函数需要时间比较长，有什么办法使这段等待的时候，显示进度条？

请贴出源码，谢谢。

[yygyogfny]

在线等。

[Lovely_baby]

C#中的进度条ProgressBar

private void btnRun_Click(object sender, EventArgs e)
        {
            btnRun.Enabled = false;

            if (txtBoxTarget.Text.Equals(String.Empty) || txtBoxTimes.Text.Equals(String.Empty))
            {
                MessageBox.Show("请输入连接的URL和连接次数！", "提示",
                    MessageBoxButtons.OK, MessageBoxIcon.Information);
                return;
            }

            int length = Int32.Parse(txtBoxTimes.Text.Trim());
            string url = txtBoxTarget.Text.Trim();
            double process = 0;
            int show = 0;

     DateTime rightNow = DateTime.Now;
            DateTime end;
            TimeSpan interval;


            toolStripStatusLabel.Text = "连接中";
            progressBar.Visible = true;
            progressBar.Minimum = 0;
            progressBar.Maximum = length;

     for (int i = 1; i <= length; i++)
            {
                try
                {

             // 这两句是连接某个网页的。
                    WebRequest myRequest = WebRequest.Create(url);
                    WebResponse myResponse = myRequest.GetResponse();
                    myResponse.Close();
                }
                catch
                {
                    txtBoxReport.Text = "网络连接有误！";
                    return;
                }

                progressBar.PerformStep();

                process = i / length;
                show = (int)process * 100;
            }

            progressBar.Visible = false;
            toolStripStatusLabel.Text = "已就绪";
            txtBoxReport.Text = "连接　" + url + " " + length + "次。";

            end = DateTime.Now;
            interval = end - rightNow;
            txtBoxReport.Text += "\r\n共耗时" + interval.TotalMilliseconds + "毫秒。";

            btnRun.Enabled = true;
        }

[yygyogfny]

楼上的兄弟，，有没有纯js的？

[wxd_860825]

我这有，给你一部分先参考参考
var timerID = null;
var timerRunning = false;


//使用时需要设置一下几个控件
var btn_disable = document.getElementById("btnExe"); //执行按钮
var obj_progresstext = document.getElementById("progressbar_text"); //进度条文本
var obj_progressbar = document.getElementById("progressbar_bar"); //进度条背景
var obj_tips = document.getElementById("tips"); //进度条说明提示





//设置进度条
function setProcessBar(exeFlag,exeMax)
{
obj_progresstext.innerHTML = parseInt(roundFun(exeFlag/exeMax,2) * 100) + "%";
obj_progressbar.style.width = parseInt(roundFun(exeFlag/exeMax,2) * 100) + "%";
obj_tips.innerHTML = exeFlag+"/"+exeMax;
}

//取值
function roundFun(number,X) {
X = (!X ? 2 : X);
return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}

//禁用按钮
function disablebtn(btn) {
btn.disabled = true;
btn.value = "执行中..";
}

//停止执行进度条
function stopstep()
{
if(timerRunning)
{
timerRunning = false;
}
if(btn_disable.disabled)
{
btn_disable.disabled= true;
// btn_disable.value="开始执行";
obj_tips.innerHTML = "已经全部成功执行完毕！";
}
}

stopstep();


function postExecute(exeMax,exeFlag)
{
ajaxObj.get("ProcessExecute.aspx?exeMax="+exeMax+"&exeFlag="+exeFlag,callback_InsertData);
}

function callback_InsertData(obj)
{
if(obj.responseText)
{
var str = obj.responseText; //"true|"+recordcount + "|" + page
var strarr = str.split("|");
var flag = strarr[0];
var exeMax = parseInt(strarr[1]); //1000
var exeFlag = parseInt(strarr[2]); //1
var Msg = strarr[3];

if(flag == "true")
{
setProcessBar(exeFlag,exeMax); //设置进度条
if(exeFlag < exeMax)
{
timerID = postExecute(exeMax,exeFlag+1);
timerRunning = true;
}
else{ stopstep(); }
}
else
{
stopstep();
obj_tips.innerHTML = "执行错误！错误原因：<br />"+Msg+"";
}
}
}




function AJAXRequest() {
var xmlObj = false;
var CBfunc,ObjSelf;
ObjSelf=this;
try { xmlObj=new XMLHttpRequest; }
catch(e) {
try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); }
catch(e2) {
try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e3) { xmlObj=false; }
}
}
if (!xmlObj) return false;
if(arguments[0]) this.url=arguments[0]; else this.url="";
if(arguments[1]) this.callback=arguments[1]; else this.callback=function(obj){return};
if(arguments[2]) this.content=arguments[2]; else this.content="";
if(arguments[3]) this.method=arguments[3]; else this.method="POST";
if(arguments[4]) this.async=arguments[4]; else this.async=true;
this.send=function() {
var purl,pcbf,pc,pm,pa;
if(arguments[0]) purl=arguments[0]; else purl=this.url;
if(arguments[1]) pc=arguments[1]; else pc=this.content;
if(arguments[2]) pcbf=arguments[2]; else pcbf=this.callback;
if(arguments[3]) pm=arguments[3]; else pm=this.method;
if(arguments[4]) pa=arguments[4]; else pa=this.async;
if(!pm||!purl||!pa) return false;
xmlObj.open (pm, purl, pa);
if(pm=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlObj.onreadystatechange=function() {
if(xmlObj.readyState==4) {
if(xmlObj.status==200) {
pcbf(xmlObj);
}
else {
pcbf(null);
}
}
}
if(pm=="POST")
xmlObj.send(pc);
else
xmlObj.send("");
}
this.get=function() {
var purl,pcbf;
if(arguments[0]) purl=arguments[0]; else purl=this.url;
if(arguments[1]) pcbf=arguments[1]; else pcbf=this.callback;
if(!purl&&!pcbf) return false;
this.send(purl,"",pcbf,"GET",true);
}
this.post=function() {
var fo,pcbf,purl,pc,pm;
if(arguments[0]) fo=arguments[0]; else return false;
if(arguments[1]) pcbf=arguments[1]; else pcbf=this.callback;
if(arguments[2])
purl=arguments[2];
else if(fo.action)
purl=fo.action;
else
purl=this.url;
if(arguments[3])
pm=arguments[3];
else if(fo.method)
pm=fo.method.toLowerCase();
else
pm="post";
if(!pcbf&&!purl) return false;
pc=this.formToStr(fo);
if(!pc) return false;
if(pm) {
if(pm=="post")
this.send(purl,pc,pcbf,"POST",true);
else
if(purl.indexOf("?")>0)
this.send(purl+"&"+pc,"",pcbf,"GET",true);
else
this.send(purl+"?"+pc,"",pcbf,"GET",true);
}
else
this.send(purl,pc,pcbf,"POST",true);
}


this.formToStr=function(fc) {
var i,query_string="",and="";
for(i=0;i<fc.length;i++) {
e=fc[i];
if (e.name!='') {
if (e.type=='select-one') {
element_value=e.options[e.selectedIndex].value;
}
else if (e.type=='checkbox' || e.type=='radio') {
if (e.checked==false) {
continue;
}
element_value=e.value;
}
else {
element_value=e.value;
}
element_value=encodeURIComponent(element_value);
query_string+=and+e.name+'='+element_value;
and="&";
}
}
return query_string;
}
}

[wxd_860825]

如果需要的话，我给你传过去。asp.net2005调用js实现的真实进度条。

[tzs2304]

up

[wxd_860825]

到时候联系我，这个小问题我研究了快一个月了。前天刚弄出来的。呵呵

[yygyogfny]

[Quote=引用 7 楼 wxd_860825 的回复:]
到时候联系我，这个小问题我研究了快一个月了。前天刚弄出来的。呵呵
[/Quote]

不要这么复杂，最简单的是：在按下按钮的时候，有提示说正在处理，也行。

[mbh0210]

<body> 
<input type="button" value="start" onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}"> 
</body> 
<script> 
document.execCommand("BackgroundImageCache",false,true); 

function ProcessBar(){ 
   this.width = 256; 
   this.height = 18; 
   this.top = 0; 
   this.left = 0; 
   this.backImg = "process_back.gif"; 
   this.foreImg = "process.gif"; 
   this.backDiv = document.createElement("div"); 
   this.foreDiv = document.createElement("div"); 
   this.fontDiv = document.createElement("div"); 

   this.isMoving = false; 
   this.nowLength = 0; 
   this.moveInterval = 100; 
   this.moveRange = 1; 
   this.timer; 

   ProcessBar.nowObj = this; 

   this.init = function(){ 
        this.foreDiv.style.backgroundImage = "url(" + this.foreImg + ")"; 
        this.foreDiv.style.backgroundRepeat = "no-repeat"; 
        this.foreDiv.style.position = "absolute"; 
        this.foreDiv.style.width = this.nowLength; 
        this.foreDiv.style.height = this.height; 
        this.foreDiv.style.top = 0; 
        this.foreDiv.style.left = 0; 
         
        this.fontDiv.style.background = "transparent"; 
        this.fontDiv.style.position = "absolute"; 
        this.fontDiv.style.width = this.width; 
        this.fontDiv.style.height = this.height; 
        this.fontDiv.style.top = 2; 
        this.fontDiv.style.left = 0; 
        this.fontDiv.style.textAlign = "center"; 
        this.fontDiv.style.fontSize = "13px"; 
        this.fontDiv.appendChild(document.createTextNode(" ")); 

        this.backDiv.style.backgroundImage = "url(" + this.backImg + ")"; 
        this.backDiv.style.backgroundRepeat = "no-repeat"; 
        this.backDiv.style.position = "absolute"; 
        this.backDiv.style.width = this.width; 
        this.backDiv.style.height = this.height; 
        this.backDiv.style.top = this.top; 
        this.backDiv.style.left = this.left; 

        this.backDiv.appendChild(this.foreDiv); 
        this.backDiv.appendChild(this.fontDiv); 

        document.body.appendChild(this.backDiv); 
   } 

   this.changeMode = function(){ 
        this.isMoving = !this.isMoving; 
         
        if(this.isMoving){ 
            this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval); 
        }else{ 
            window.clearInterval(this.timer); 
        } 
   } 

   this.moving = function(){ 
        ProcessBar.nowObj.nowLength += ProcessBar.nowObj.moveRange; 
        ProcessBar.nowObj.foreDiv.style.width = ProcessBar.nowObj.nowLength; 

        ProcessBar.nowObj.fontDiv.firstChild.data = Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.width)*100) + "%"; 

        if(ProcessBar.nowObj.nowLength >= ProcessBar.nowObj.width){ 
            window.clearInterval(ProcessBar.nowObj.timer); 
            ProcessBar.nowObj.fontDiv.firstChild.data = "Complete!"; 
        } 
   } 

    
} 

var processBar = new ProcessBar(); 
processBar.width=327 
processBar.backImg = "GuageWhite.jpg"; processBar.foreImg = "GuageGreen.jpg"; processBar.top = 100; 
processBar.left = 20; 
processBar.init(); 
</script>

[mbh0210]

这个是肯定控制图片来呈现效果的，图片好像没有办法放上来

[dwtyxugy1]

js读取文件？不懂你什么意思据我了解js是没法用来读取文件的除非是针对IE的好像还可以，我只做过一个上传图片带进度条的可以看下http://220.231.180.88:98/Default.aspx 如果是flash10的播放器的效果会好点

[phf0313]

mark,
不行就用C#的ProgressBar控件把！