default.aspx

带进度条大文件上传源码(单文件多文件都可以传)+v2.0

<%@ Page Language="C#" MasterPageFile="~/MasterPageLayout.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Demo for Asp.net 2.0" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="root" style="left: 10px; top: 10px; display: none;" onselectstart="javascript:return false;">
        <div id="handle">
            &nbsp;</div>
        <div id="container">
            <div class="info">
                状态:&nbsp;&nbsp;上传中</div>
            <div class="info">
                <nobr>文件:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</nobr>
            </div>
            <div class="progressBar">
                <div class="indicator" style="width: 0px">
                </div>
            </div>
            <div class="info">
                速度:&nbsp;&nbsp;</div>
            <div class="info">
                已用时间:&nbsp;&nbsp;</div>
        </div>
        <div class="info">
            <a id="btn_cancel" href="javascript:cancelUpload()">退出</a></div>
    </div>
    <input name="file1" type="file" /><asp:Button ID="btn_upload" Text="上传" runat="server"
        OnClick="btn_upload_Click" />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <script language="javascript" type="text/javascript">
		<!--
		
		//preload images
	//	var img1 = new Image();
	//	img1.src = "images/bar_bg.gif";
	//	var img2 = new Image();
	//	img2.src = "images/Indicatorbg.gif";
		
		var ProgressInfo = Class.create();
		
		ProgressInfo.prototype = {
			initialize:	function(status,percent,file,speed,leftTime,fileCount){
							this.Status = status;
							this.Percent =percent;
							this.File = file;
							this.Speed =speed;
							this.LeftTime = leftTime;
							this.FileCount = fileCount;
			},
			
			update:	function(){
						if(this.Status == "Error")
						{
							document.location.href = document.location.href;
						}
						else
						{
							var html = "<div class=\"info\">Status:&nbsp;&nbsp;"+(this.Status=="Uploading" ? this.Percent + "% Completed" :this.Status)+"</div>";
							html += "<div class=\"info\"><nobr>File:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+(this.Status=="Completed" ? this.FileCount + " fiel(s) uploaded successfully !" : this.File)+"</nobr></div>";
							html += "<div class=\"progressBar\"><div class=\"indicator\" style=\"width:"+(3*this.Percent)+"px\"></div></div>";
							html += "<div class=\"info\">Transfer Rate:&nbsp;&nbsp;"+(this.Status=="Initializing" ? "" : this.Speed)+"</div>";
							html += "<div class=\"info\">Time Remaining:&nbsp;&nbsp;"+(this.Status=="Initializing" ? "" : this.LeftTime)+"</div>";
							var container = $("container");
							container.innerHTML = html;						
						}
			}			
		};
		
		function getProgressInfo()
		{
			var url = "GetProgressInfo.aspx";
			var pars = "UploadID=<%=UploadID%>&cmd=Update&temp="+Math.random();
			var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: showResponse});			
		}
		
		function cancelUpload()		
		{
			var url = "GetProgressInfo.aspx";
			var pars = "UploadID=<%=UploadID%>&cmd=Cancel&temp="+Math.random();
			var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: showResponse});
			this.disabled = true;		
		}
		
		function showResponse(request)
		{
			eval(request.responseText);
		}
		
		function showProgressBar()
		{
			var ipts = document.getElementsByTagName('INPUT');
			var openBar = false;
			for(var i=0;i<ipts.length;i++)
			{
				var obj = ipts[i];
				if(obj.type  == 'file')
				{
					if(obj.value != '')
					{
						openBar = true;
						break;
					}
				}
			}
			if(openBar)
			{
				var theHandle = $("handle");
				var theRoot   = $("root");
				Drag.init(theHandle, theRoot);
				theRoot.style.display = "";
				var internalUpdate = new PeriodicalExecuter(getProgressInfo,1);
			}
		}
			
		//-->
    </script>

</asp:Content>