带进度条上传

于 2010-03-03 09:41:38 发布
阅读量95 收藏
点赞数
文章标签： CSS UI ASP JavaScript Web ViewUI 
<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>

 

iteye_7082
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（转）写一个网页进度loading
BINGO的博客
05-21 861
来自：简书 作者：jack_lo    原文：www.jianshu.com/p/4c93f5bd9861 loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到 load 的过程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。 网页loading有很多用处，比如页面的加载进度，数据的加载过程
文件上传进度条实现
weixin_34056162的博客
11-27 493
2019独角兽企业重金招聘Python工程师标准>>> ...
VB计算机机房管理系统设计(源代码+系统).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
毕业设计论文写作模板.zip
08-18
毕业设计 题目： 基于xxxxxx框架的设计与实现 姓 名: 学 号: 层 次: 本科 专 业: 软件工程 班 级: xx级软件工程01班 指导教师: 2022年5月 xxxx学院教务处 制 独创性声明 一、本设计是本人独立完成； 二、本设计没有任何抄袭行为； 三、若有不实，一经查出，请答辩委员会取消本人答辩资格。 承诺人（签名）： 年 月 日
基于springboot的高校心理教育辅导系统 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的高校心理教育辅导系统是一个综合性的在线平台，旨在为高校学生、教师和管理员提供心理教育和辅导服务。该系统分为管理后台和用户网页端，支持多种角色使用，包括管理员、学生和教师。 辅导预约：学生可以通过该模块预约心理辅导服务，管理员可以查看和管理预约信息。 测评结果：系统提供心理测评工具，学生可以在线完成测评，系统自动生成测评结果供学生和教师查看。 试题和试卷：教师可以创建和管理试题库，设计试卷并组织在线考试，学生可以在线参加考试并查看成绩。 考试：系统支持在线考试功能，包括考试安排、考试监控、成绩统计等。 留言板：提供一个交流平台，学生、教师和管理员可以发布留言、交流心得和反馈意见。 录屏：https://www.bilibili.com/video/BV1Ct4y1d7L4 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2.unitypackage
最新发布
08-18
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2
字节跳动：抖擞传统，短视频与传统文化研究报告
08-18
字节跳动：抖擞传统，短视频与传统文化研究报告
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面
08-18
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面。让django admin更符合国人的使用习惯。并且实现了不用修改任何代码为django admin换肤。100%兼容原生admin
基于springboot的足球俱乐部管理后台 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的足球俱乐部管理后台是一个功能全面的系统，它分为管理后台和用户网页端，旨在为管理员和学员提供便捷的操作体验。管理员可以通过管理后台进行学员管理、教师管理、课程安排、课程签到等操作，同时还可以查看和处理商品信息以及足球商品订单。学员则可以通过用户网页端查看课程安排、进行课程签到、浏览商品信息并下单购买。整个系统采用前后端分离的架构，前端使用Vue.js进行开发，后端使用SpringBoot框架，确保了系统的高性能和可扩展性。 录屏：https://www.bilibili.com/video/BV1vw41177rR 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
VB客运中心汽车售票管理系统设计(论文+源代码).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
分享一款特别好看特别美的仿微博前端页面
08-18
分享一款特别好看特别美的仿微博前端页面
vue的可视化建模系统源代码.zip
08-18
vue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zipvue的可视化建模系统源代码.zip
基于springboot的房屋租赁系统 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的房屋租赁系统是一个功能全面、易于使用的在线房屋租赁管理平台，它分为管理后台和用户网页端，旨在为管理员和租客提供便捷的房屋租赁服务。系统的主要模块包括房屋信息管理，允许管理员发布和更新房屋信息；看房申请管理，租客可以在线提交看房申请，管理员可以查看和处理申请；租赁合同管理，系统自动生成租赁合同，方便双方确认和签署；房屋报修管理，租客可以在线提交报修申请，管理员可以分配维修任务；收租信息管理，系统自动记录租金收取情况，方便管理员查看和管理；维修数据管理，记录维修任务的完成情况和费用；租客管理，管理员可以查看和管理租客信息；公告管理，管理员可以发布和管理公告信息。整个系统采用现代化的前端技术Vue.js和后端框架SpringBoot，保证了系统的高性能和良好的用户体验。 录屏：https://www.bilibili.com/video/BV1pK4y1z7no 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
oracle 监听文件 listener.ora
08-18
oracle 监听文件 listener.ora
VB考试分析评价系统(源代码+系统+开题报告+外文翻译+英文翻译+答辩PPT).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
Ambient Sounds - Interactive Soundscapes v1.2.16.unitypackage
08-18
Ambient Sounds - Interactive Soundscapes v1.2.16
大数据与计算模型人工智能
08-18
当前，人工智能持续升温，大语言模型吸引了众多人士的关注，并在全球范围内掀起了一股热潮。人工智能的成功本质上不是大算力“出奇迹”，而是改变了计算模型。首先，肯定了数据对于人工智能的基础性作用，指出合成数据将是未来数据的主要来源。然后，回顾了计算模型的发展历程，重点介绍了神经网络模型与图灵模型的历史性竞争；指出了大模型的重要标志是机器涌现智能，强调大模型的本质是“压缩”；分析了大模型产生“幻觉”的原因。最后，呼吁科技界在智能化科研中要重视大科学模型。
智慧校园解决方案PPT(28页).pptx
08-18
智慧校园的建设目标是通过数据整合、全面共享，实现校园内教学、科研、管理、服务流程的数字化、信息化、智能化和多媒体化，以提高资源利用率和管理效率，确保校园安全。 智慧校园的建设思路包括构建统一支撑平台、建立完善管理体系、大数据辅助决策和建设校园智慧环境。通过云架构的数据中心与智慧的学习、办公环境，实现日常教学活动、资源建设情况、学业水平情况的全面统计和分析，为决策提供辅助。此外，智慧校园还涵盖了多媒体教学、智慧录播、电子图书馆、VR教室等多种教学模式，以及校园网络、智慧班牌、校园广播等教务管理功能，旨在提升教学品质和管理水平。 智慧校园的详细方案设计进一步细化了教学、教务、安防和运维等多个方面的应用。例如，在智慧教学领域，通过多媒体教学、智慧录播、电子图书馆等技术，实现教学资源的共享和教学模式的创新。在智慧教务方面，校园网络、考场监控、智慧班牌等系统为校园管理提供了便捷和高效。智慧安防系统包括视频监控、一键报警、阳光厨房等，确保校园安全。智慧运维则通过综合管理平台、设备管理、能效管理和资产管理，实现校园设施的智能化管理。 智慧校园的优势和价值体现在个性化互动的智慧教学、协同高效的校园管理、无处不在的校园学习、全面感知的校园环境和轻松便捷的校园生活等方面。通过智慧校园的建设，可以促进教育资源的均衡化，提高教育质量和管理效率，同时保障校园安全和提升师生的学习体验。 总之，智慧校园解决方案通过整合现代信息技术，如云计算、大数据、物联网和人工智能，为教育行业带来了革命性的变革。它不仅提高了教育的质量和效率，还为师生创造了一个更加安全、便捷和富有智慧的学习与生活环境。
OkHttp实现带进度条上传文件
06-02
在 OkHttp 中实现带进度条上传文件，可以使用 RequestBody 的子类 ProgressRequestBody 来实现，具体代码如下： ``` public class ProgressRequestBody extends RequestBody { private RequestBody requestBody; private UploadProgressListener progressListener; public ProgressRequestBody(RequestBody requestBody, UploadProgressListener progressListener) { this.requestBody = requestBody; this.progressListener = progressListener; } @Override public MediaType contentType() { return requestBody.contentType(); } @Override public long contentLength() throws IOException { return requestBody.contentLength(); } @Override public void writeTo(BufferedSink sink) throws IOException { BufferedSink bufferedSink; if (sink instanceof Buffer) { bufferedSink = sink; } else { bufferedSink = Okio.buffer(sink); } CountingSink countingSink = new CountingSink(bufferedSink); BufferedSink progressSink = Okio.buffer(countingSink); requestBody.writeTo(progressSink); progressSink.flush(); progressListener.onProgress(countingSink.getContentLength()); } private class CountingSink extends ForwardingSink { private long contentLength; private long bytesWritten; public CountingSink(Sink delegate) { super(delegate); contentLength = -1; bytesWritten = 0; } @Override public void write(Buffer source, long byteCount) throws IOException { super.write(source, byteCount); if (contentLength == -1) { contentLength = contentLength(); } bytesWritten += byteCount; } public long getContentLength() { return contentLength; } public long getBytesWritten() { return bytesWritten; } } } ``` 其中，UploadProgressListener 为上传进度监听器，代码如下： ``` public interface UploadProgressListener { void onProgress(long bytesWritten); } ``` 在上传文件的时候，将 ProgressRequestBody 作为 RequestBody 使用即可： ``` OkHttpClient client = new OkHttpClient(); File file = new File("path/to/file"); RequestBody requestBody = new MultipartBody.Builder() .setType(MultipartBody.FORM) .addFormDataPart("file", file.getName(), new ProgressRequestBody(RequestBody.create(MediaType.parse("application/octet-stream"), file), new UploadProgressListener() { @Override public void onProgress(long bytesWritten) { // 更新上传进度 } })) .build(); Request request = new Request.Builder() .url("http://localhost/upload") .post(requestBody) .build(); Response response = client.newCall(request).execute(); ``` 在 ProgressRequestBody 中，每次写入数据的时候，都会回调 onProgress 方法，可以在这里更新上传进度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值