上传带进度条

kayo

浏览: 557954 次
性别:
来自: 安徽

最近访客更多访客>>

ssk168

zzy7075

hxgg

yangbo126

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA体系

ASP.net ASP .net XML JavaScript

<html>

<body>

<script language="javascript">
var oXMLDoc = new ActiveXObject("Microsoft.XMLDOM");            //创建'MSXML'对象
oXMLDoc.async = true;
var theUniqueID= 0;
var iTimerID=null;        //这个变量是作定时器的ID

//让数据提交的同时执行显示进度条的函数
function UploadData()
{
    theUniqueID = (new Date()).getTime() % 1000000000;

    // 清除原始数据
    PercentDone.style.width = "0%";
    ElapsedTime.innerHTML = "";
    TimeLeft.innerHTML = "";
    SizeCompleted.innerHTML = "";
    TotalSize.innerHTML = "";
    TransferRate.innerHTML = "";

    document.myform.action = "demo.asp?ProgressID=" + theUniqueID; //处理上传数据的程序
    //将提交的数据放在一个名字是upload隐藏的iframe里面处理，这样提交的页面就不会跳转到处理数据的页
    document.myform.target="upload"
    document.myform.submit();     //提交表单

    ProgressBar();      //开始执行反映上传情况的函数

}

function ProgressBar()
{


    sURL = "Progress_Xml.asp?ProgressID=" + theUniqueID + "&temp="+Math.random();      //获取上传状态数据的地址
    oXMLDoc.onreadystatechange = Function( "fnLoadComplete();" );
    oXMLDoc.load( sURL );

}

function fnLoadComplete()
{
    var iReadyState；
    try
    {
        iReadyState = oXMLDoc.readyState;
    }
    catch(e)
    {
        return;
    }
    if( iReadyState != 4 ) return;

    if( oXMLDoc == null || oXMLDoc.xml == "" )
    {
        window.status = 'Xml load fault';
        return;
    }

    var oRoot = oXMLDoc.documentElement;     //获取返回xml数据的根节点

    if(oRoot != null)
    {
        if (oRoot.selectSingleNode("ErrorMessage") == null)
        {

            var readyState = oRoot.selectSingleNode("ReadyState").text;

            // 如果还没初始化完成，继续
            if ( readyState == "uninitialized" )
            {
                iTimerID = setTimeout("ProgressBar()", 1000);
            }
            // 上传进行中
            else if ( readyState == "loading" )              //文件上传结束就取消定时器
            {

                bar1.style.display = 'block'; //让显示上传进度显示的层的可见

                PercentDone.style.width = oRoot.selectSingleNode("Percentage").text;        //设置进度条的百分比例
                //根据返回的数据在客户端显示
                ElapsedTime.innerHTML = oRoot.selectSingleNode("ElapsedTime").text;       //显示剩余时间
                TimeLeft.innerHTML = oRoot.selectSingleNode("TimeLeft").text;       //显示剩余时间
                SizeCompleted.innerHTML = oRoot.selectSingleNode("SizeCompleted").text;    //已上传数据大小
                TotalSize.innerHTML = oRoot.selectSingleNode("TotalSize").text;    //总大小
                TransferRate.innerHTML=oRoot.selectSingleNode("TransferRate").text; //传输速率

                //这里设定时间间隔是0.5秒，你也可以根据你的情况修改获取数据时间间隔
                iTimerID = setTimeout("ProgressBar()", 100);
            }
            // 上传结束
            else if ( readyState == "loaded" )
            {
                PercentDone.style.width = "100%";        //设置进度条的百分比例
                if (iTimerID != null)
                    clearTimeout(iTimerID)
                iTimerID = null;

                alert("上传结束，服务器处理中...");
            }
            // 上传结束
            else
            {
                PercentDone.style.width = "100%";        //设置进度条的百分比例
                if (iTimerID != null)
                    clearTimeout(iTimerID)
                iTimerID = null;
                alert("上传结束");
            }
        }
        else
        {
            alert(oRoot.selectSingleNode("ErrorMessage").text);
            upload.location.href = "about:blank";
        }
    }

}

function CacelUpload()
{
    upload.location.href = "about:blank";
    if (iTimerID != null)
        clearTimeout(iTimerID)
    iTimerID = null;
    bar1.style.display = '';
}

</script>

<base target="_blank">
<form name="myform" method="post" action="demo.asp" enctype="multipart/form-data" target="upload">
<h2>Asp无组件上传带进度条 </h2>
<HR>
上传测试：<BR>
<input type="file" name="filefield1">(请上传小于10MB的文件)<br>
<input type="button" value="上传" onclick="UploadData()">
<input type="button" value="取消上传" onclick="CacelUpload()"><br>
<div id=bar1 style="display:">
    <table border="0" width="100%">
    <tr>
        <td><b>传送:</b></td>
    </tr>
    <tr bgcolor="#999999">
        <td>
        <table border="0" width="" cellspacing="1" bgcolor="#0033FF" id="PercentDone">
            <tr>
            <td> </td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr><td>总大小:&nbsp</td><td id="TotalSize"></td></tr>
                <tr><td>已经上传:&nbsp</td><td id="SizeCompleted"></td></tr>
                <tr><td>平均速率:</td><td id="TransferRate"></td></tr>
                <tr><td>使用时间:</td><td id="ElapsedTime"></td></tr>
                <tr><td>剩余时间:</td><td id="TimeLeft"></td></tr>
            </table>
        </td>
    </tr>
    </table>
</div>
<iframe name="upload" style="width:100%"></iframe>
</form>
<pre>
'-----------------------------------------------------
' 描述: Asp无组件上传带进度条
' 作者: 宝玉(<A HREF="http://blog.joycode.com/dotey">http://blog.joycode.com/dotey</A>)
' 链接: <A HREF="http://www.openlab.net.cn">开放实验室(西北工业大学民间BBS)</A>, <A HREF="http://blog.joycode.com">博客堂</A>, <A HREF="http://www.cnblogs.com">博客园</A>, <A HREF="http://www.51js.com">无忧脚本</A>
' 版本: 1.0
' 版权: 本作品可免费使用，但是请勿移除版权信息
' 下载: <A HREF="http://www.webuc.net/MyProject/upload/upload.rar">http://www.webuc.net/MyProject/upload/upload.rar</A>
' 推荐: China Community Server(<A HREF="http://www.CommunityServer.cn/">http://www.CommunityServer.cn/</A>)，一个开源的Asp.Net社区系统，包含论坛、Blog、相册和留言版等程序
'-----------------------------------------------------
</pre>
</body>

</html>

分享到：

jconnect的字符集 | 使用Ant执行SQL脚本文件

2008-07-30 15:28
浏览 1929
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论