Asp.net添加上传进度条

最新推荐文章于 2022-11-12 20:03:20 发布
最新推荐文章于 2022-11-12 20:03:20 发布
阅读量98 收藏
点赞数
文章标签： ui xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wangyhua/archive/2012/04/10/4050664.html
版权

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    private void beginProgress()
    {
        //根据ProgressBar.htm显示进度条界面
        string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
        StreamReader reader = new StreamReader(@templateFileName, System.Text.Encoding.GetEncoding("GB2312"));
        string html = reader.ReadToEnd();
        reader.Close();
        Response.Write(html);
        Response.Flush();
    }

    private void setProgress(int percent)
    {
        string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
        Response.Write(jsBlock);
        Response.Flush();
    }

    private void finishProgress()
    {
        string jsBlock = "<script>SetCompleted();</script>";
        Response.Write(jsBlock);
        Response.Flush();
    }

    private void Page_Load(object sender, System.EventArgs e)
    {
        beginProgress();

        for (int i = 1; i <= 100; i++)
        {
            setProgress(i);

            //此处用线程休眠代替实际的操作，如加载数据等
            System.Threading.Thread.Sleep(50);
        }

        finishProgress();
    }
}

 

htm代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">
<head>
    <title>无标题页</title>
    <script type="text/javascript">
        function SetPorgressBar(pos)
        {
            //设置进度条居中
            var screenHeight = window["mainWindow"].offsetHeight;
            var screenWidth = window["mainWindow"].offsetWidth;
            ProgressBarSide.style.width = Math.round(screenWidth / 2);
            ProgressBarSide.style.left = Math.round(screenWidth / 4);
            ProgressBarSide.style.top = Math.round(screenHeight / 2);
            ProgressBarSide.style.height = "21px";
            ProgressBarSide.style.display = "";
            
            //设置进度条百分比                      
            ProgressBar.style.width = pos + "%";
            ProgressText.innerHTML = pos + "%";
        }

        //完成后隐藏进度条
        function SetCompleted()
        {      
            ProgressBarSide.style.display = "none";
        }
     </script> 
</head>
    <body>
    <div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
        <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
        <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
    </div>
    </body>
</html>

 


 

转载于:https://www.cnblogs.com/wangyhua/archive/2012/04/10/4050664.html

weixin_34247299
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【ASP.NET编程知识】asp.net单文件带进度条上传的解决方案.docx
05-18
【ASP.NET编程知识】asp.net单文件带进度条上传的解决方案.docx
asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）
10-27
在asp.net开发中，有很多可以上传的组件模块，利用HTML的File控件(uploadify)的上传也是一种办法，这里为大家介绍一下（uploadify）的一些使用方法
[翻译]ASP.NET(C#) 中的文件上传进度条
sharpcn的专栏
10-15 3979
作者：azamsharp 翻译：sharpcn介绍：几天前，我在论坛上看到一个“如何创建文件上传进度条”的问题。大家知道，我们有上传客户端文件到服务器端的控件，但是这个控件并不提供任何关于上传进度的信息。如果客户端上传文件（尤其是大文件），而页面上没有任何变化，就不容易知道上传操作是否在进行，有多少还没有传完。解决方案就是使用一些技术方法在客户端显示上传进度。背景知识：在这篇文章中，我并不主讲“如
asp.net实现文件上传带进度条（多种风格）
技术资料收集站
04-26 2930
文件上传 带进度条 多种风格 非常漂亮！    友好的提示 以及上传验证！     部分代码： [c-sharp] view plain copy&lt;%@ Page Language="C#" %&gt;  &lt;%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJA...
asp.net单文件带进度条上传
FreshMan
06-28 2473
asp.net单文件带进度条上传，不属于任务控件，也不是flash类型的上传，完全是asp.net、js、css实现上传。源码为开发测试版，需要使用的亲需要注意修改配置文件。
asp.net FileUpload 上传进度条.zip
07-14
本教程将深入探讨如何在ASP.NET应用中创建一个“完美进度条”，以实时监控文件上传的大小和百分比。 首先，我们需要了解ASP.NET中的文件上传机制。当用户通过FileUpload控件选择文件并提交表单时，服务器端会接收到...
ASP.NET MVC 带进度条的文件上传源码
01-14
在ASP.NET MVC中实现带进度条的文件上传，是一个常见且实用的功能，尤其在用户需要上传大量或大文件时，提供进度反馈可以显著提升用户体验。 首先，我们需要理解文件上传的基本流程。在Web应用中，文件上传通常涉及...
ASP.NET实现进度条效果
10-19
在ASP.NET中实现进度条效果是一项常见的需求，特别是在处理耗时操作如文件上传或后台处理时，为用户提供反馈和交互体验。以下是如何在ASP.NET中创建一个简单的进度条的详细步骤： 1. **HTML结构**： 首先，我们...
asp.net实现进度条
11-14
在 ASP.NET 中实现进度条功能可以极大地提升用户体验，尤其是在处理长时间运行的任务时，如文件上传、大数据处理或后台服务调用等。进度条能够实时反馈任务状态，让用户了解操作的进度，避免用户因等待时间过长而...
asp.net上传图片带进度条
05-03
在ASP.NET中实现图片上传并显示进度条的功能是一项常见的需求，尤其在用户上传大体积图片时，进度条能提供良好的用户体验。以下将详细介绍如何在ASP.NET中构建这样的功能。 首先，我们需要理解上传过程的基本原理。...
ASPUpload组件上传文件带进度
ly8199的专栏
03-06 2356
  co_upload.asp---------------------------------------------------------------------------------------filelx=request("filelx")    文件上传类型EditName=request("EditName")   回传到上页面编辑框的Namedivname
解决ASP.NET上传文件大小限制
s_hluo的专栏
11-09 1927
解决ASP.NET上传文件大小限制 对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大小.executionTimeout="800"maxRequestLength="40960"useFullyQualifiedRedirectUrl="false"/>  //executionTimeout預設是 90 秒，你要改的話：execut
flash+asp.net上传文件，显示进度条
asp、.net专栏
06-05 6490
     最近由于项目的需求，对flash做了一番研究，并结合Asp.net实现RIA开发。以下是用flash作为客户端(文件上传)，通过asp.net作为服务器端(实现文件接收)的一个实例：      一、客户端基本实现流程：      1、flash设计界面如下图(1)所示：                                                         图(1
ASP.Net 上传进度条的实现方法
weixin_34202952的博客
07-02 138
对于加载时间比较长的ASP.NET页面，我们可以在客户端浏览器中显示进度条来显示页面正在装载。下面就是具体的实现过程： 新建项目，名字为WebPortal，在项目类型中选择Visual C#项目或者Visual Basic项目都可； 在模板类型中选择ASP.NET Web应用程序； 位置里输入：http://localhost/WebPortal； 添加新项：名字为ShowProgress的We...
ASP.NET真的进度条，上传文件和文件夹
zhzhx0318的专栏
10-03 1427
功能介绍： 1.选择文件或者文件夹，然后点击上传按钮，进入上传FTP界面。 2.实时百分比可以动态显示文件或者文件夹的进度，首先在本地电脑压缩，显示实时的进度情况和所需剩余时间。 3.上传，压缩完成后上传，实时动态的百分比显示上传到FTP的进度情况。完成后显示源文件路径和上传后文件路径。   开发环境：VS2010   界面设计：如下图所示。 图1 程序主界面 图2 选择
C#.NET的界面编程--实例2：进度条
m0_72676510的博客
11-12 2414
C#.NET的界面编程--实例2：进度条
使用ProgressBar实现加载进度条
CatherineShen的博客
01-30 1378
一、ProgressBar简介 ProgressBar是进度条组件，通常用于向用户展示某个耗时操作完成的进度，而不让用户感觉是程序失去了相应，从而更好地提升用户界面的友好性 二、指定ProgressBar显示风格 1、水平进度条：可以精确显示进度（可以显示刻度或者百分比） 2、环形进度条：不可以精确显示进度（一直转，类似过场动画） import android.support.v
asp.net jquery 进度条上传
最新发布
05-14
ASP.NET jQuery进度条上传是一种常见的网页上传文件功能。通过前端jQuery插件和后端ASP.NET技术，实现了文件上传过程中的进度条展示，提高了用户体验和操作效率。具体实现方式如下： 1. 前端实现 使用jQuery的ajaxForm插件，结合jQueryUI的progressbar插件，进行文件上传进度条的展示。在HTML页面上添加上传表单和进度条，通过ajaxForm设置表单提交事件，实现文件上传过程中进度条的实时更新。代码如下： ``` <form id="uploadForm" enctype="multipart/form-data" method="post" action="UploadFile.ashx"> <input type="file" name="fileUpload" /> <input type="submit" value="上传" /> </form> <div id="progressBar"></div> ``` ``` $("#uploadForm").ajaxForm({ beforeSend: function() { $("#progressBar").progressbar({ value: 0 }); }, uploadProgress: function(event, position, total, percentComplete) { $("#progressBar").progressbar({ value: percentComplete }); }, success: function() { $("#progressBar").progressbar({ value: 100 }); alert("上传成功！"); }, error: function() { alert("上传失败！"); } }); ``` 2. 后端实现 在ASP.NET中，通过HttpHandler实现文件上传处理，从request对象中获取上传的文件信息，根据文件大小和上传进度，实时更新进度条的值。代码如下： ``` <%@ WebHandler Language="C#" Class="UploadFile" %> using System; using System.Web; public class UploadFile : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file = context.Request.Files["fileUpload"]; int fileSize = file.ContentLength; int bytesRead = 0; byte[] buffer = new byte[8192]; using (System.IO.Stream stream = file.InputStream) using (System.IO.BinaryReader reader = new System.IO.BinaryReader(stream)) using (System.IO.MemoryStream ms = new System.IO.MemoryStream()) { double percentComplete = 0; int totalRead = 0; while ((bytesRead = reader.Read(buffer, 0, buffer.Length)) > 0) { ms.Write(buffer, 0, bytesRead); totalRead += bytesRead; percentComplete = (double)totalRead / fileSize * 100; context.Response.Write(percentComplete.ToString()); } } } public bool IsReusable { get { return false; } } } ``` 综上，ASP.NET jQuery进度条上传，通过前后端技术的组合应用，在网页上传过程中有效展示文件上传进度和结果，提升了用户的体验感和操作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值