• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >ASP.NET > asp.net文件上传带进度条实现案例(多种风格)

asp.net文件上传带进度条实现案例(多种风格)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了文件下载 asp.net,文件上传 asp.net,多文件上传 asp.net,asp.net,asp net培训等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

先饱饱眼福:

在之前的文章中也有类似带进度条文件传送的案例,大家可以翻阅之前的文章对知识点进行扩充。

部分代码:

<%@ Page Language="C#" %> 
<%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJAX.Progress" TagPrefix="mb" %> 
 
<!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"> 
<head runat="server"> 
 <title>Untitled Page</title> 
 <link rel="Stylesheet" href="_assets/css/progress.css" mce_href="_assets/css/progress.css" /> 
 <link rel="Stylesheet" href="_assets/css/upload.css" mce_href="_assets/css/upload.css" /> 
 <mce:style type="text/css"><!-- 
 BODY{ font-family:Arial, Sans-Serif; font-size:12px;} 
 
--></mce:style><style type="text/css" mce_bogus="1"> BODY{ font-family:Arial, Sans-Serif; font-size:12px;} 
 </style> 
 <mce: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; 
 } 
 
 
// --></mce:script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /> 
 
 <mce:script type="text/javascript"><!-- 
 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); 
 } 
 
 
// --></mce:script> 
 
 <div> 
 <div class="upload"> 
 <h3>文件上传</h3> 
 <div> 
 <iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx" mce_src="Upload.aspx"></iframe> 
 <mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" mce_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> 
</div>

 upload.aspx:

//限制大小 1M 
 protected void Page_Load2(object sender, EventArgs e) 
 { 
 if (this.IsPostBack) 
 { 
 UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo; 
 if (uploadInfo == null) 
 { 
 // 让父页面知道无法处理上传 
 const string js = "window.parent.onComplete('error', '无法上传文件。请刷新页面,然后再试一次);"; 
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); 
 } 
 else 
 { 
 // 让服务端知道我们还没有准备好.. 
 uploadInfo.IsReady = false; 
 
 // 上传验证 
 if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0 
 
 && this.fileUpload.PostedFile.ContentLength < 1048576)// 限制1M 
 { 
 // 设置路径 
 string path = this.Server.MapPath(@"Uploads"); 
 string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName); 
 
 // 上传信息 
 uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength; 
 uploadInfo.FileName = fileName; 
 uploadInfo.UploadedLength = 0; 
 
 //文件存在 初始化... 
 uploadInfo.IsReady = true; 
 
 //缓存 
 int bufferSize = 1; 
 byte[] buffer = new byte[bufferSize]; 
 
 // 保存字节 
 using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create)) 
 { 
 while (uploadInfo.UploadedLength < uploadInfo.ContentLength) 
 { 
 //从输入流放进缓冲区 
 int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize); 
 // 字节写入文件流 
 fs.Write(buffer, 0, bytes); 
 // 更新大小 
 uploadInfo.UploadedLength += bytes; 
 
 // 线程睡眠 上传就更慢 这样就可以看到进度条了 
 System.Threading.Thread.Sleep(100); 
 } 
 } 
 
 // 删除. 
 File.Delete(Path.Combine(path, fileName)); 
 
 // 让父页面知道已经处理上传完毕 
 const string js = "window.parent.onComplete('success', '{0} 已成功上传');"; 
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true); 
 } 
 else 
 { 
 if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1M 
 { 
 const string js = "window.parent.onComplete('error', '超出上传文件限制大小,请重新选择');"; 
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); 
 } 
 else 
 { 
 const string js = "window.parent.onComplete('error', '上传文件出错');"; 
 ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); 
 } 
 } 



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • asp.net实现多个文件同时下载功能
  • asp.net实现服务器文件下载到本地的方法
  • Asp.Net修改上传文件大小限制方法
  • asp.NET中实现文件的压缩和解压(3种方式)
  • ASP.NET文件上传Upload的实现方法
  • ASP.NET访问共享文件夹的详细步骤
  • ASP.NET文件上传Upload的实现方法
  • ASP.NET访问共享文件夹的详细步骤
  • asp.net core实现文件上传功能
  • asp.net图片文件的上传与删除方法

相关文章

  • 2017-05-11DataSet、DataTable、DataRow区别详解
  • 2017-05-11asp.net 页面中添加普通视频的几种方式介绍
  • 2018-08-20ASP.NET MVC5使用MiniProfiler监控MVC性能
  • 2018-08-20.NET Core利用skiasharp文字头像生成方法教程(基于docker发布)
  • 2017-05-11DataGridView多维表头的实现方法
  • 2018-08-20通过Web Service实现IP地址查询功能的示例
  • 2017-05-11asp.net显示自己的网页图标的几种方式
  • 2017-05-11Visual Studio.Net 内幕(7)
  • 2017-05-11Asp.Net Mvc2 OA 工作流设计思路[图]
  • 2017-05-11ASP.NET Global.asax应用程序文件简介

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery+Ajax用户登录功能的实现
    • ASP.NET C#生成下拉列表树实现代码
    • asp.net core 2.0 webapi集成signalr(实例讲解)
    • asp.net中各种类型的JSON格式化
    • asp.net上传execl文件后,在页面上加载显示(示例代码)
    • asp.net下Request.QueryString取不到值的解决方法
    • asp.net与excel互操作实现代码
    • .Net微信开发之如何解决access_token过期问题
    • linq to sql 中,如何解决多条件查询问题,答案,用表达式树! (下)
    • asp.net coolite 删除时弹出确定按钮

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有