带进度条上传

最新推荐文章于 2025-05-27 20:42:38 发布

最新推荐文章于 2025-05-27 20:42:38 发布 · 133 阅读

文章标签：

本文介绍了一个使用ASP.NET实现的文件上传功能，并通过客户端JavaScript和服务器端C#交互来实时展示上传进度。该方案利用了ScriptManager组件及WebMethod特性来支持页面方法调用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="_assets/css/progress.css" />
    <link rel="Stylesheet" href="_assets/css/upload.css" />
    <style type="text/css">
        BODY{ font-family:Arial, Sans-Serif; font-size:12px;}
    </style>
    <script type="text/C#" runat="server">
       
        protected void Page_Load(object sender, EventArgs args)
        {
            if (!this.IsPostBack)
            {                
                this.Session["UploadInfo"] = new UploadInfo { IsReady = false };
            }
        }
        
        /// <summary>
        /// 
        /// </summary>
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public static object GetUploadStatus()
        {
            //获取文件长度
            UploadInfo info = HttpContext.Current.Session["UploadInfo"] as UploadInfo;

            if (info != null && info.IsReady)
            {
                int soFar = info.UploadedLength;
                int total = info.ContentLength;

                int percentComplete = (int)Math.Ceiling((double)soFar / (double)total * 100);
                string message = string.Format("上传 {0} ... {1} of {2} 字节", info.FileName, soFar, total);
                
                //  返回百分比
                return new { percentComplete = percentComplete, message = message };
            }

            //  还没有准备好...
            return null;
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />
    
    <script type="text/javascript">
        debugger;
        var intervalID = 0;
        var progressBar;
        var fileUpload;
        var form;       
        // 进度条      
        function pageLoad(){           
            $addHandler($get('upload'), 'click', onUploadClick);
            progressBar = $find('progress');
        }
        // 注册表单       
        function register(form, fileUpload){            
            this.form = form;
            this.fileUpload = fileUpload;
        }        
        //上传验证
        function onUploadClick() {        
            var vaild = fileUpload.value.length > 0;
            if(vaild){              
                $get('upload').disabled = 'disabled';             
                updateMessage('info', '初始化上传...');                
                //提交上传
                form.submit();                
                // 隐藏frame
                Sys.UI.DomElement.addCssClass($get('uploadFrame'), 'hidden');
                // 0开始显示进度条
                progressBar.set_percentage(0);
                progressBar.show();           
                // 上传过程
                intervalID = window.setInterval(function(){
                    PageMethods.GetUploadStatus(function(result){
                        if(result){
                            //  更新进度条为新值
                            progressBar.set_percentage(result.percentComplete);
                            //更新信息
                            updateMessage('info', result.message);
                            
                            if(result == 100){
                                // 自动消失
                                window.clearInterval(intervalID);                        
                            }
                        }
                    });
                }, 500);                
            }
            else{
                onComplete('error', '您必需选择一个文件');
            }
        }       
    
        function onComplete(type, msg){
            // 自动消失
            window.clearInterval(intervalID);
            // 显示消息
            updateMessage(type, msg);
            // 隐藏进度条
            progressBar.hide();
            progressBar.set_percentage(0);
            // 重新启用按钮
            $get('upload').disabled = '';
            //  显示frame
            Sys.UI.DomElement.removeCssClass($get('uploadFrame'), 'hidden');
        }        
        function updateMessage(type, value){
            var status = $get('status');
            status.innerHTML = value;
            // 移除样式
            status.className = '';
            Sys.UI.DomElement.addCssClass(status, type);
        }
    
    </script>
    
    <div>
        <div class="upload">
            <h3>文件上传</h3>
            <div>
                <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx"></iframe>
                <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" Value="0" Mode="Manual" Speed=".4" Width="100%" />
                <div>
                    <div id="status" class="info">请选择要上传的文件</div>
                    <div class="commands">
                        <input id="upload" type="button" value="上传" /> 
                    </div>
                </div>
            </div>
        </div> 
      
    </div>
    </form>
</body>
</html>