<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>
分享到：
相关推荐
而“ASP带进度条上传文件”是指在上传过程中，为用户提供一个进度条来显示文件上传进度，提升用户体验。 实现这一功能的关键在于JavaScript或jQuery等客户端技术与服务器端ASP的交互。首先，我们需要在HTML页面上...
ASP.NET单文件带进度条上传解决方案 本文主要讲述了ASP.NET单文件带进度条上传的解决方案，通过使用jquery框架和ASP.NET缓存机制，实现了文件上传和进度条显示的功能。 知识点1：使用jquery框架实现文件上传 在...
在提供的"springmvc带进度条上传源码"中，可能包含了这些功能的实现，包括控制器、服务层、视图层以及前端的HTML、CSS和JavaScript文件。分析这些源码可以帮助你更好地理解文件上传和进度条显示的完整流程。如果你...
【标题】：“漂亮的带进度条上传程序” 这个项目是一个基于Flash技术实现的文件上传系统，具有用户友好的进度条显示功能。它提升了用户体验，让用户在等待文件上传时能清晰地看到上传进度，增加了互动性和反馈效果...
ASP带进度条上传文件系统是一种基于Active Server Pages (ASP)技术的文件上传解决方案，它为用户提供了一种直观的上传进度指示，增强了用户体验。在传统的文件上传过程中，用户往往无法得知文件上传的具体进度，而带...
"spring+velocity+ajax带进度条上传文件"是一个综合性的技术应用场景，涉及到Spring框架、Velocity模板引擎以及Ajax技术，旨在提供一个用户友好的文件上传体验，其中包括实时的进度条显示。下面将详细解释这些技术...
以上就是使用JavaScript实现简单带进度条上传的基本步骤。为了适应更多场景，你可以根据需求扩展此代码，例如添加多文件上传支持、错误处理、文件类型验证等。在实际项目中，可能还需要与后端服务器进行接口对接，...
在这个"AJAX+ASP带进度条上传"的主题中，我们将深入探讨如何利用AJAX技术和ASP（Active Server Pages）实现文件的异步上传，并同时展示上传进度，以JQuery作为辅助工具，提供更友好的用户界面。 首先，我们要理解...
在ASP上传文件带进度条的情况下，通常使用JavaScript或者AJAX技术来实现。客户端发送文件到服务器后，服务器返回已接收文件的部分信息，客户端根据这些信息更新进度条。如果使用Flash，Flash与服务器之间可以通过...
本话题将围绕"WEB超大文件带进度条上传"这个主题，详细介绍Java如何实现这一功能。 一、断点续传原理 断点续传是一种允许用户中断文件传输后从上次中断的地方继续传输的技术，尤其适用于网络环境不稳定或文件体积...
【标题】"extjs swfupload .net 多文件带进度条上传"涉及的核心技术是前端的EXTJS框架、后端的ASP.NET平台以及中间的文件上传组件SWFUpload。这种组合允许用户在Web应用中实现批量文件上传并显示上传进度，提供了...
在“struts2.1 带进度条上传”这个主题中，我们将深入探讨如何使用Struts2.1实现文件上传功能，并且添加一个进度条来增强用户体验。 首先，文件上传在Web应用中是非常常见的需求，它允许用户上传各种类型的文件到...
"ASP.NET 带进度条上传 DEMO"是一个实例，演示了如何在ASP.NET环境中实现在上传大文件时显示进度条，为用户提供更好的交互体验。 首先，文件上传在ASP.NET中通常通过HttpPostedFileBase对象来处理。在表单中，我们...
### Struts带进度条上传知识点解析 #### 一、Struts框架简介 Struts是一个开源的Web应用框架，属于MVC（Model-View-Controller）架构模式的一种实现，主要用于简化Java Web应用程序的开发过程。Struts框架的核心是...
在IT领域，带进度条的上传功能是一种用户体验优化的重要技术，...总的来说，"带进度条上传"不仅关乎技术实现，更涉及用户体验设计。通过合理的技术手段和界面设计，可以大大提高用户在上传文件过程中的满意度和效率。
在ASP（Active Server Pages）开发中，实现带进度条的文件上传功能是一项常见的需求，尤其在用户需要上传大文件或多个文件时，进度条能够提供良好的用户体验，让用户了解上传进度，减少等待的焦虑感。本知识点将深入...
总结来说，实现“WinForm HTTP 带进度条 上传实例”需要理解WinForm控件的使用、HTTP文件上传机制以及服务器端的文件接收处理。通过这些技术，你可以构建出一个功能完善的文件上传系统，为用户提供良好的交互体验。
在"AJAX带进度条上传图片"中，核心组件包括前端的JavaScript和后端的处理程序。在这个例子中，后端使用了`.ashx`文件，这是一种.NET Framework中的HTTP Handler，它可以处理特定的HTTP请求。 前端部分，我们通常...