asp.net文件上传带进度条实现案例(多种风格)
更新时间:2021年9月22日 10:10 点击:1531
先饱饱眼福:
在之前的文章中也有类似带进度条文件传送的案例,大家可以翻阅之前的文章对知识点进行扩充。
部分代码:
<%@ 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>
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); } } uploadInfo.IsReady = false; } } } // 不限制大小 protected void Page_Load(object sender, EventArgs e) { if (this.IsPostBack) { UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo; uploadInfo.IsReady = false; if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0) { 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; } } const string js = "window.parent.onComplete('success', '{0} 已成功上传');"; ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true); } else { const string js = "window.parent.onComplete('error', '上传文件出错');"; ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); } uploadInfo.IsReady = false; } }
代码就不贴完了,直接上干货,亲,这可是免邮的哦!下载地址
上一篇: ASP.NET对大文件上传的解决方案
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
- 这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- 本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- php不具备实时上传进度条功能,如果想有这种功能我们一般会使用ajax来实现,但是php提供了一个apc,它就可以与php配置实现上传进度条功能。 主要针对的是window上的应用。 1.服务器要支持apc扩展,没有此扩展的话,下载一个扩...2015-10-30
- 本文实例讲述了PHP多文件上传类,分享给大家供大家参考。具体如下:<?phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30
详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22