实现NeatUpload大文件上传和个性显示进度条
一、概述
放清明假啦,宿舍的人都差不多走完了,就留下一两个宅男还在宿舍搞基。在这无聊之际,没有什么事可做,又不想把时间浪费在看视频,打游戏之类。想了想,于是就着手总结一下上次有用到的一个开源的大文件上传组件NeatUpload。
NeatUpload是由Dean Brettle在2005开始编写的一个ASP.NET组件,它允许开发人员以流的形式上传文件并存储在文件系统或数据库中,而且允许用户监控上传进度。2010年,由于Dean Brettle要去做其他的事情,就将NeatUpload交给Joe Audette管理,并将项目托管在CodePlex上。好啦,我们就不去深究它的背景情况啦,我们关心的是如何将它应用到我们自己的项目中。
首先,我们去官网下载软件,地址:
NeatUpload:http://neatupload.codeplex.com/ 我下载的是NeatUploadBinaries-1-3-26版本的。
二、安装步骤
1.将下载的安装包解压出来,把NeatUploadBinaries-1-3-26\NeatUploadBinaries目录下的NeatUpload文件夹复制到Webroot的根目录下,将NeatUploadBinaries-1-3-26\NeatUploadBinaries\bin目录下的Brettle.Web.NeatUpload.dll文件复制到相应的放DLL文件的文件夹里,一般在bin文件夹下。
2.添加引用,把Brettle.Web.NeatUpload.dll文件引用到项目中来。右键工具箱常规选项卡,选择项,打开选择工具箱项窗体。在.NET Framework组件下选择浏览,将Brettle.Web.NeatUpload.dll添加到工具箱中。这时常规选项卡下多出几个控件。我们主要用到的有InputFile、MultiFile和ProgressBar这三个控件。
三、配置neatupload上传控件,修改Web.config
将<configuration>节点下的第一个子元素配置为: <configSections><sectionGroup name="system.web"><section name="neatUpload" type="Brettle.Web.NeatUpload.ConfigSectionHandler,Brettle.Web.NeatUpload" allowLocation="true" /></sectionGroup></configSections>在<system.web>节点下加上如下配置:<httpModules><!--大文件上传--><add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule,Brettle.Web.NeatUpload"/></httpModules><!--useHttpModule="true" 设为true时才能看到上传状态,默认是False--><neatUpload useHttpModule="true" maxNormalRequestLength="1048576" maxRequestLength="1048576" defaultProvider="FilesystemUploadStorageProvider"><providers><add name="FilesystemUploadStorageProvider" type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider, Brettle.Web.NeatUpload"/></providers></neatUpload><httpRuntime maxRequestLength="1048576" executionTimeout="3600"/>
四、拖拽控件在页面上,开始编程
1.单文件上传,将InputFile和ProgressBar控件加进页面中,再添加一个服务器端按钮,添加鼠标点击事件,如下:
<script type="text/javascript"> function ToggleVisibility(id, type) //进度条的隐藏和显示{el = document.getElementById(id);if(el.style){if(type == 'on'){ el.style.display = 'block';}else{ el.style.display = 'none';}}else{if(type == 'on'){ el.display = 'block';}else{ el.display = 'none';}}}</script>
<form id="form1" runat="server"><div><div><Upload:InputFile ID="InputFile1" runat="server" /><asp:Button ID="upload" runat="server" Text="上传" style="display:none" OnClientClick="ToggleVisibility('progress', 'on')" OnClick="upload_Click" /></div><div id="progressbar"><Upload:ProgressBar ID="ProgressBar1" runat='server' Inline="True"></Upload:ProgressBar></div></div></form>
后台代码
protected void upload_Click(object sender,EventArgs e){if (InputFile1.HasFile){string FileName = this.InputFile1.FileName;//获取上传文件的文件名,包括后缀string ExtenName = System.IO.Path.GetExtension(FileName);//获取扩展名string SaveFileName = System.IO.Path.Combine(System.Web.HttpContext.Current.Request.MapPath("UpLoads/"), DateTime.Now.ToString("yyyyMMddhhmm") + ExtenName);//合并两个路径为上传到服务器上的全路径if (this.InputFile1.ContentLength > 0){try{this.InputFile1.MoveTo(SaveFileName, Brettle.Web.NeatUpload.MoveToOptions.Overwrite);}catch (Exception ex){throw ex;}}else{Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('选择要上传的文件为空!');",true);}string url = "UpLoads/" + DateTime.Now.ToString("yyyyMMddhhmmss") + ExtenName; //文件保存的路径float FileSize = (float)System.Math.Round((float)InputFile1.ContentLength / 1024000, 1); //获取文件大小并保留小数点后一位,单位是M}else{Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('请选择要上传的文件!');", true);}}
上传文件前界面如下:
上传文件后,界面如下:
五、修改进度条样式,主要修改default.css、Progress.aspx及ProgressBar控件的属性
default.css部分,修改进度条的颜色,背景图片,显示文字的颜色等
.ProgressDisplay .ProgressBar
{background-color:#6CAF00; /*修改背景颜色*/background-image:url('progressbar.gif') /*修改背景图片*/
}
#normalInProgress{color: Red; /*正在上传时进度条的字体颜色*/
}
#completed{color:Blue; /*上传完成的字体颜色*/
}
Progress.aspx部分,修改在整个上传过程中进度条显示的状态和信息
<Upload:DetailsSpan id="normalInProgress" runat="server" WhenStatus="NormalInProgress" style="font-weight: normal; white-space: nowrap;"><%-- 文件正在上传时显示的 --%><%-- <%# FormatCount(BytesRead) %>/<%# FormatCount(BytesTotal) %> <%# CountUnits %> --%><%# FormatRate(BytesPerSec) %> <%# String.Format("{0:0%}", FractionComplete) %><%-- - 剩余时间<%# FormatTimeSpan(TimeRemaining) %> s --%>
</Upload:DetailsSpan>
<Upload:DetailsSpan id="chunkedInProgress" runat="server" WhenStatus="ChunkedInProgress" style="font-weight: normal; white-space: nowrap;"><%# FormatCount(BytesRead) %> <%# CountUnits %>at <%# FormatRate(BytesPerSec) %>- <%# FormatTimeSpan(TimeElapsed) %> elapsed
</Upload:DetailsSpan>
<Upload:DetailsSpan id="processing" runat="server" WhenStatus="ProcessingInProgress ProcessingCompleted" style="font-weight: normal; white-space: nowrap;"><%# ProcessingHtml %>
</Upload:DetailsSpan>
<Upload:DetailsSpan id="completed" runat="server" WhenStatus="Completed"><%-- 文件上传完成时显示的 --%>文件大小: <%# FormatCount(BytesRead) %> <%# CountUnits %><%-- at <%# FormatRate(BytesPerSec) %> took <%# FormatTimeSpan(TimeElapsed) %> --%>
</Upload:DetailsSpan>
<Upload:DetailsSpan id="cancelled" runat="server" WhenStatus="Cancelled">上传已被取消
</Upload:DetailsSpan>
<Upload:DetailsSpan id="rejected" runat="server" WhenStatus="Rejected">禁止: <%# Rejection != null ? Rejection.Message : "" %>
</Upload:DetailsSpan>
<Upload:DetailsSpan id="error" runat="server" WhenStatus="Failed">错误: <%# Failure != null ? Failure.Message : "" %>
</Upload:DetailsSpan>
ProgressBar属性,一般修改他的高和宽,还有就是Inline="True"的属性。
这样,我们的事情就差不多完成了。 最终显示效果如下:
上传前
上传中
六、总结
国外的很多软件都是开源和免费的,而且很多的软件实用性很强,我们要善于去发现和挖掘现在已经存在的东西,不断地去学习,去深入地了解其内部的运行机理。这样我们才能够把别人的思想融汇在自己的大脑中,最终变成自己的东西。就像亚里士多德所说的一样,要想成功,就必须弄清基础问题。
由于本人所学知识有限,在文中有错或者不恰之处,还望各位高人指出纠正,我将感激不尽。
实现NeatUpload大文件上传和个性显示进度条相关推荐
- NeatUpload 大文件上传
NeapUpload 作者地址:http://www.brettle.com/(抱着的那个小孩子蛮可爱的) 支持大文件上传的东东不少,可是不掏你钱包的寥寥无几了,找了好几天没找到其他合适的,AspUp ...
- 使用jQuery-File-Upload-master文件上传插件实现真实进度条
2019独角兽企业重金招聘Python工程师标准>>> 首先要说明的是我是在Spring Boot和guns框架的基础上使用jQuery-File-Upload-master的插件来 ...
- wepy小程序聊天记录选择文件上传 wx.chooseMessageFile 带有进度条动画 支持文档打开 完整记录
#需求:从聊天记录中选择文件,支持的文件格式doc, docx, pdf,同时支持上传的文档打开 文件选择与上传文件后展示模版代码: <van-cell title="从微信聊天记录中 ...
- 前端大文件上传解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- WebUploader大文件上传解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- 浏览器 批量大文件上传下载
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- NeatUpload:支持大文件上传 进度条
NeatUpload:支持大文件上传 引用: NeatUpload可以让ASP.NET开发人员把磁盘上的文件通过流的方式上传并且可以监视上传进度 .它是开源的且在 Mono''s XSP/mod_mo ...
- 大文件上传 NeatUpload 控件
因为要做一个大文件上传的功能,所以搜索了下.找到一个控件NeatUpload 而且这个空间是开源的 官网为http://www.brettle.com/neatupload 于是到官网去下了控件.它里 ...
- 开源的大文件上传组件NeatUpload™
支持.net 1.1 .NET 2.0 这里是 live demo 很不容易发现的,在.net下面要找个开源的东西真是难也. 当然大文件上传有很多组件比如ABCUPLOAD SlickUpload不过 ...
- 大文件上传组件集成说明
集成说明 Jimy 1. 部署说明 1.1. 复制文件夹"FileCenter"到应用程序目录下(即添加到应用程序中) 同时添加相关dll引用: MyBigFi ...
最新文章
- Assert(断言) 的用法
- php编程用空格,shell 编程中空格的使用方法
- 【2020蓝桥杯】Python组真题解析 - 第十一届蓝桥杯
- ejb jsf jpa_完整的WebApplication JSF EJB JPA JAAS –第1部分
- 你必须知道的CSS盒模型,面试建议
- 界面原型设计工具Balsamiq、墨刀、Axure、Mockplus
- 职业教育计算机课教学反思,职高课后的教学反思(精选5篇)
- [Windows] 集福宝- 支付宝 集福神器 2019
- 免费分享20套PHP源码
- 一篇文章讲清python开发必懂的8种数据结构
- linux优化ssd磁盘,Ubuntu下针对ssd硬盘优化
- Remote Desktop Connection Manager2.7 安装+基本使用
- 苹果电脑在哪里改计算机id,苹果MAC电脑如何更改ID账号
- python 更换列名
- EPUB、CAJ 、PDF 格式的区别,有什么好用的epub阅读器
- Voldemort — 分布式 key-value 存储系统
- java如何等待异步结果_你如何等待所有异步调用在Java中完成?
- 2020年终总结万粉小成就福利来了
- 2015年职称计算机考试宝典,2015年度职称计算机考试宝典.doc
- FOC电机ST系列处理器使用的基础知识
热门文章
- 校园网锐捷Ubuntu12.04LTS
- LINUX系统使用锐捷客户端认证校园网(华中科技大学)
- 闲论排样/排料算法(nesting)
- 在线神器 / 一键生成文字抖动表情 / 文字动态gif
- java从入门到精通视频教程-[网盘下载]在线观看
- python俄罗斯方块代码34行_Python:游戏:300行代码实现俄罗斯方块
- 【现代版】为人处世三十六计详解,真的很受益!
- 深入理解Nginx:(1)初探Nginx 之一
- 基于python的一个论文降重脚本
- 手机安装python模块吗_你不知道的Python模块安装教程