以上传大的文件,带有进度条,进度条的样式可以自己修改,软件是完全免费的
这是一个在IE8上的运行效果
本控件不能在WebForm下运行,不然会出错:Brettle.Web.NeatUpload.MoveToOptions.Overwrite
MoveToOptions没有引用
1.在VS工具箱中点右键选“选择项”…… 将Brettle.Web.NeatUpload.dll添加到工具箱。
2.新建web项目。将NeatUpload复制到项目根目录。
3.修改Web.config
在<configuration>里面加入
XML/HTML Code
复制内容到剪贴板
- <configSections>
- <sectionGroup name="system.web">
- <section name="neatUpload" type="Brettle.Web.NeatUpload.ConfigSectionHandler, Brettle.Web.NeatUpload" allowLocation="true" />
- </sectionGroup>
- </configSections>
在 <system.web>加入
XML/HTML Code
复制内容到剪贴板
- <neatUpload useHttpModule="false" maxNormalRequestLength="4096" maxRequestLength="2097151" defaultProvider="FilesystemUploadStorageProvider">
- <providers>
- <add name="FilesystemUploadStorageProvider"
- type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider, Brettle.Web.NeatUpload"
- />
- </providers>
- </neatUpload>
在<configuration>里面的后面位置加入
XML/HTML Code
复制内容到剪贴板
- <location path="Default.aspx" >
- <system.web>
- <neatUpload useHttpModule="true" />
- <httpRuntime maxRequestLength="2097151" executionTimeout="3600" useFullyQualifiedRedirectUrl="true" />
- </system.web>
- </location>
- </configuration>
为了使ProgreessBAR能显示,在配置文件<system.web>中需要加入
XML/HTML Code
复制内容到剪贴板
- <httpRuntime useFullyQualifiedRedirectUrl="true" />
- <httpModules>
- <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload" />
- </httpModules>
按钮事件处理函数:
C# Code
复制内容到剪贴板
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- public partial class _Default : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- protected void Button1_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 + @"/download", 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修改部分:
CSS Code
复制内容到剪贴板
- .ProgressDisplay .ProgressBar {
- background-color: #D7E5F7;
- background-image: url("/11.gif"); /*进度条背景图片*/
- height:20px;
- }
- #normalInProgress{
- color: Red; /*进度条字体颜色*/
- }
- #completed{
- color:Blue; /*上传完成的字体颜色*/
- }
效果图:
Progress.aspx是显示进度条的核心文件,相关数据的显示都在里面。
XML/HTML Code
复制内容到剪贴板
- <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>
现在可以拖拽控件开始编程了。
XML/HTML Code
复制内容到剪贴板
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
- <%@ Register Assembly="Brettle.Web.NeatUpload" Namespace="Brettle.Web.NeatUpload"
- TagPrefix="Upload" %>
- <!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></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="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
- <Upload:ProgressBar ID="ProgressBar1" runat="server">
- </Upload:ProgressBar>
- </div>
- </form>
- </body>
- </html>
可以在添加后的工具箱看到相应控件。