详解NeatUpload上传控件的使用-飞外

NeatUpload用于文件上传。可传大文件。目前最新版本:NeatUpload-1.2.32。

官方网站:http://www.brettle.com/neatupload

NeatUpload地址:http://www.brettle.com/Data/Sites/1/NeatUpload-1.3.21.zip

演示地址:http://www.brettle.com/Demo.aspx

1.在VS工具箱中点右键选“选择项”…… 将Brettle.Web.NeatUpload.dll添加到工具箱。

可以在添加后的工具箱看到相应控件。

2.新建web项目。将NeatUpload复制到项目根目录。

3.修改Web.config

?xmlversion="1.0"encoding="utf-8"? configuration configSections sectionGroup sectionallowLocation="true"/ /sectionGroup /configSections appSettings/ connectionStrings/ system.web neatUploaduseHttpModule="false"maxNormalRequestLength="4096"maxRequestLength="2097151"defaultProvider="FilesystemUploadStorageProvider" providers add/ /providers /neatUpload compilationdebug="false" /compilation authenticationmode="Windows"/ httpModules !--如果不加这httpmodules,进度条不显示-- add/ /httpModules /system.web locationpath="Default.aspx" system.web neatUploaduseHttpModule="true"/ httpRuntimemaxRequestLength="2097151"executionTimeout="3600"useFullyQualifiedRedirectUrl="true"/ /system.web /location /configuration

现在可以拖拽控件开始编程了。
4.aspx页面代码如下:

headrunat="server" title NeatUpload /title scriptlanguage="javascript" functionToggleVisibility(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 /head body formrunat="server" div Upload:InputFileID="AttachFile"runat="server"/ asp:ButtonID="Upload"runat="server"Text="Upload"OnClientClick="ToggleVisibility('ProgressBar','on')"onclick="Upload_Click"/ div Upload:ProgressBarID="pbProgressBar"runat='server'Inline="true"Width="280px"Height="50px" /Upload:ProgressBar /div /div /form /body /html

设计页面如下:

5.按钮事件处理函数:

protectedvoidUpload_Click(objectsender,EventArgse){stringFileName=this.AttachFile.FileName;//获取上传文件的全路径stringExtenName=System.IO.Path.GetExtension(FileName);//获取扩展名stringSaveFileName=System.IO.Path.Combine(Request.PhysicalApplicationPath,DateTime.Now.ToString("yyyyMMddhhmm")+ExtenName);//合并两个路径为上传到服务器上的全路径if(this.AttachFile.ContentLength 0){try{this.AttachFile.MoveTo(SaveFileName,Brettle.Web.NeatUpload.MoveToOptions.Overwrite);}catch(Exceptionex){throwex;}}}

做到这里程序就可以运行的了。
默认的进度条的样式是可以修改的。
主要修改default.css、Progress.aspx及ProgressBar控件的属性。

default.css修改部分:

.ProgressDisplay.ProgressBar{background-color:#D7E5F7;background-image:url("/11.gif");/*进度条背景图片*/height:20px;}#normalInProgress{color:Red;/*进度条字体颜色*/}#completed{color:Blue;/*上传完成的字体颜色*/}

Progress.aspx是显示进度条的核心文件,相关数据的显示都在里面。

td divrunat="server" Upload:DetailsSpanrunat="server"WhenStatus="NormalInProgress" %--正在上传时显示的--% %-- %#FormatCount(BytesRead)% / %#FormatCount(BytesTotal)% %#CountUnits% --% ( %#String.Format("{0:0%}",FractionComplete)% )at %#FormatRate(BytesPerSec)% %--- %#FormatTimeSpan(TimeRemaining)% left--% /Upload:DetailsSpan Upload:DetailsSpanrunat="server"WhenStatus="ChunkedInProgress" %#FormatCount(BytesRead)% %#CountUnits% at %#FormatRate(BytesPerSec)% - %#FormatTimeSpan(TimeElapsed)% elapsed /Upload:DetailsSpan Upload:DetailsSpanrunat="server"WhenStatus="Completed" %--上传完成时显示的--% 完成了: %#FormatCount(BytesRead)% %#CountUnits% at %#FormatRate(BytesPerSec)% took %#FormatTimeSpan(TimeElapsed)% /Upload:DetailsSpan Upload:DetailsSpanrunat="server"WhenStatus="Cancelled" Cancelled! /Upload:DetailsSpan Upload:DetailsSpanrunat="server"WhenStatus="Rejected" Rejected: %#Rejection!=null?Rejection.Message:""% /Upload:DetailsSpan Upload:DetailsSpanrunat="server"WhenStatus="Failed" Error: %#Failure!=null?Failure.Message:""% /Upload:DetailsSpan Upload:DetailsDivrunat="server"UseHtml4="true"Width=' %#Unit.Percentage(Math.Floor(100*FractionComplete))% ' /Upload:DetailsDiv /div /td

程序的效果图如下:
上传前:

上传中:

上传结束: