版本：NeatUpload-1.2.32，用于文件上传。可传大文件。
1.在VS工具箱中点右键选“选择项”…… 将Brettle.Web.NeatUpload.dll添加到工具箱。
可以在添加后的工具箱看到相应控件。
2.新建web项目。将NeatUpload复制到项目根目录。
3.修改Web.config
|
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<configSections> <sectionGroup name="system.web"> <sectionname="neatUpload" type="Brettle.Web.NeatUpload.ConfigSectionHandler, Brettle.Web.NeatUpload" allowLocation="true" /> </sectionGroup> </configSections>
<appSettings/> <connectionStrings/>
<system.web> <neatUploaduseHttpModule="false" maxNormalRequestLength="4096" maxRequestLength="2097151" defaultProvider="FilesystemUploadStorageProvider"> <providers> <addname="FilesystemUploadStorageProvider" type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider, Brettle.Web.NeatUpload" /> </providers> </neatUpload> <compilation debug="false"> </compilation> <authentication mode="Windows" /> <httpModules> <!--如果不加这httpmodules，进度条不显示--> <addname="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload"/> </httpModules> </system.web> <location path="Default.aspx" > <system.web> <neatUploaduseHttpModule="true" /> <httpRuntime maxRequestLength="2097151" executionTimeout="3600" useFullyQualifiedRedirectUrl="true" /> </system.web> </location> </configuration> |
现在可以拖拽控件开始编程了。
4.aspx页面代码如下：
|
<head runat="server"> <title> NeatUpload </title> <script type="text/javascript" language="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> </head> <body> <form id="form1" runat="server"> <div> <Upload:InputFile ID="AttachFile" runat="server" /> <asp:Button ID="Upload" runat="server" Text="Upload" OnClientClick="ToggleVisibility('ProgressBar','on')" onclick="Upload_Click" /> <div id="ProgressBar" > <Upload:ProgressBar ID="pbProgressBar" runat='server' Inline="true" Width="280px" Height="50px"> </Upload:ProgressBar> </div> </div> </form> </body> </html> |
设计页面如下：
5.按钮事件处理函数：
|
protected void Upload_Click(object sender, EventArgs e) { string FileName = this.AttachFile.FileName;//获取上传文件的全路径 string ExtenName = System.IO.Path.GetExtension(FileName);//获取扩展名 string SaveFileName = 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 (Exception ex) { throw ex; } } } |
做到这里程序就可以运行的了。
默认的进度条的样式是可以修改的。
主要修改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 id="barTd" > <div id="statusDiv" runat="server" class="StatusMessage">
<Upload:DetailsSpan id="normalInProgress" runat="server" WhenStatus="NormalInProgress" style="font-weight: normal; white-space: nowrap;"> <%-- 正在上传时显示的 --%> <%-- <%# FormatCount(BytesRead) %>/<%# FormatCount(BytesTotal) %> <%# CountUnits %> --%> (<%# String.Format("{0:0%}", FractionComplete) %>) at <%# FormatRate(BytesPerSec) %> <%-- - <%# FormatTimeSpan(TimeRemaining) %> left --%> </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="completed" runat="server" WhenStatus="Completed"> <%-- 上传完成时显示的 --%> 完成了: <%# FormatCount(BytesRead) %> <%# CountUnits %> at <%# FormatRate(BytesPerSec) %> took <%# FormatTimeSpan(TimeElapsed) %> </Upload:DetailsSpan> <Upload:DetailsSpan id="cancelled" runat="server" WhenStatus="Cancelled"> Cancelled! </Upload:DetailsSpan> <Upload:DetailsSpan id="rejected" runat="server" WhenStatus="Rejected"> Rejected: <%# Rejection != null ? Rejection.Message : "" %> </Upload:DetailsSpan> <Upload:DetailsSpan id="error" runat="server" WhenStatus="Failed"> Error: <%# Failure != null ? Failure.Message : "" %> </Upload:DetailsSpan> <Upload:DetailsDiv id="barDetailsDiv" runat="server" UseHtml4="true" Width='<%# Unit.Percentage(Math.Floor(100*FractionComplete)) %>' class="ProgressBar"></Upload:DetailsDiv> </div> </td> |
程序的效果图如下：
上传前：
上传中：
上传结束：
