实现NeatUpload大文件上传和个性显示进度条
2014-04-05 01:54
1191 查看
一、概述
放清明假啦,宿舍的人都差不多走完了,就留下一两个宅男还在宿舍搞基。在这无聊之际,没有什么事可做,又不想把时间浪费在看视频,打游戏之类。想了想,于是就着手总结一下上次有用到的一个开源的大文件上传组件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
四、拖拽控件在页面上,开始编程
1.单文件上传,将InputFile和ProgressBar控件加进页面中,再添加一个服务器端按钮,添加鼠标点击事件,如下:
后台代码
上传文件前界面如下:
上传文件后,界面如下:
五、修改进度条样式,主要修改default.css、Progress.aspx及ProgressBar控件的属性
default.css部分,修改进度条的颜色,背景图片,显示文字的颜色等
Progress.aspx部分,修改在整个上传过程中进度条显示的状态和信息
ProgressBar属性,一般修改他的高和宽,还有就是Inline="True"的属性。
这样,我们的事情就差不多完成了。 最终显示效果如下:
上传前
上传中
六、总结
国外的很多软件都是开源和免费的,而且很多的软件实用性很强,我们要善于去发现和挖掘现在已经存在的东西,不断地去学习,去深入地了解其内部的运行机理。这样我们才能够把别人的思想融汇在自己的大脑中,最终变成自己的东西。就像亚里士多德所说的一样,要想成功,就必须弄清基础问题。
由于本人所学知识有限,在文中有错或者不恰之处,还望各位高人指出纠正,我将感激不尽。
放清明假啦,宿舍的人都差不多走完了,就留下一两个宅男还在宿舍搞基。在这无聊之际,没有什么事可做,又不想把时间浪费在看视频,打游戏之类。想了想,于是就着手总结一下上次有用到的一个开源的大文件上传组件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"的属性。
这样,我们的事情就差不多完成了。 最终显示效果如下:
上传前
上传中
六、总结
国外的很多软件都是开源和免费的,而且很多的软件实用性很强,我们要善于去发现和挖掘现在已经存在的东西,不断地去学习,去深入地了解其内部的运行机理。这样我们才能够把别人的思想融汇在自己的大脑中,最终变成自己的东西。就像亚里士多德所说的一样,要想成功,就必须弄清基础问题。
由于本人所学知识有限,在文中有错或者不恰之处,还望各位高人指出纠正,我将感激不尽。
相关文章推荐
- jquery uploadify 实现批量上传,带进度显示,判断文件大小
- 用JAVA实现大文件上传及显示进度信息
- 原生JS实现ajax上传文件并显示进度条
- JavaWeb项目实现文件上传动态显示进度
- Commons Fileupload+Servlet+JQuery实现文件上传进度条
- 基于HTML5 Ajax实现文件上传并显示进度条
- Struts2+JQuery.uploadify插件实现带进度的多文件上传示例【也可以设置去掉进度条的显示】
- uploadsample(上传文件和Ajax显示上传进度)
- html5用ajax方式实现文件上传并显示进度
- JavaWeb项目实现文件上传动态显示进度
- html 使用Ajax 实现多文件上传,并显示进度
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
- struts2实现文件上传显示进度条效果
- JS实现批量上传文件并显示进度功能
- 基于AJAX的文件上传显示进度条实现
- Jquery和BigFileUpload实现大文件上传及进度条显示
- eclipse 基于struts2 + json 实现文件异步上传, 显示进度条
- Java动态显示文件上传进度的简单实现
- Ext4.2结合Spring MVC实现文件上传显示进度
- JAVA实现大文件上传及显示进度信息