详解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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.   
  3. <configuration> 
  4.   
  5.     <configSections> 
  6.         <sectionGroup name="system.web"> 
  7.             <section name="neatUpload" type="Brettle.Web.NeatUpload.ConfigSectionHandler, Brettle.Web.NeatUpload" allowLocation="true" /> 
  8.         </sectionGroup> 
  9.     </configSections> 
  10.   
  11.     <appSettings/> 
  12.     <connectionStrings/> 
  13.   
  14.     <system.web> 
  15.         <neatUpload useHttpModule="false" maxNormalRequestLength="4096" maxRequestLength="2097151" defaultProvider="FilesystemUploadStorageProvider"> 
  16.             <providers> 
  17.                 <add name="FilesystemUploadStorageProvider" 
  18.                 type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider, Brettle.Web.NeatUpload" /> 
  19.             </providers> 
  20.         </neatUpload> 
  21.         <compilation debug="false"> 
  22.         </compilation> 
  23.         <authentication mode="Windows" /> 
  24.         <httpModules> 
  25.             <!--如果不加这httpmodules,进度条不显示--> 
  26.            <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload"/> 
  27.         </httpModules> 
  28.     </system.web> 
  29.     <location path="Default.aspx" > 
  30.         <system.web> 
  31.             <neatUpload useHttpModule="true" /> 
  32.             <httpRuntime maxRequestLength="2097151" executionTimeout="3600" useFullyQualifiedRedirectUrl="true" /> 
  33.         </system.web> 
    1. </location> 
    2. </configuration> 

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

    1. <head runat="server"> 
    2.     <title> NeatUpload </title> 
    3.     <script type="text/javascript" language="javascript"> 
    4.        function ToggleVisibility(id, type) 
    5.        { 
    6.            el = document.getElementById(id); 
    7.            if(el.style) 
    8.            { 
    9.                if(type == 'on') 
    10.                {  
    11.                   el.style.display = 'block'
    12.                }
      1.  else 
      2.                {  
      3.                   el.style.display = 'none'
      4.                } 
      5.            } 
      6.            else 
      7.            { 
      8.                if(type == 'on') 
      9.                {  
      10.                    el.display = 'block'
      11.                } 
      12.                else 
      13.                {       
      14.                   el.display = 'none'
      15.                } 
      16.            } 
      17.        } 
      18.    </script> 
      19. </head> 
        1. <body> 
        2.     <form id="form1" runat="server"> 
        3.     <div> 
        4.         <Upload:InputFile ID="AttachFile" runat="server" /> 
        5.    <asp:Button ID="Upload" runat="server" Text="Upload" 
        6.             OnClientClick="ToggleVisibility('ProgressBar','on')" onclick="Upload_Click" /> 
        7.        <div id="ProgressBar" > 
        8.        <Upload:ProgressBar ID="pbProgressBar" runat='server' Inline="true" Width="280px" 
        9.                Height="50px"> 
        10.        </Upload:ProgressBar> 
        11.    </div> 
        12.    </div> 
        13.     </form> 
        14. </body> 
        15. </html> 

        设计页面如下:

        5.按钮事件处理函数:

        1. protected void Upload_Click(object sender, EventArgs e) 
        2.         { 
        3.             string FileName = this.AttachFile.FileName;//获取上传文件的全路径 
        4.             string ExtenName = System.IO.Path.GetExtension(FileName);//获取扩展名 
        5.             string SaveFileName = System.IO.Path.Combine(Request.PhysicalApplicationPath, DateTime.Now.ToString("yyyyMMddhhmm") + ExtenName);//合并两个路径为上传到服务器上的全路径 
        6.             if (this.AttachFile.ContentLength > 0) 
        7.             { 
        8.                 try 
        9.                 { 
        10.                     this.AttachFile.MoveTo(SaveFileName, Brettle.Web.NeatUpload.MoveToOptions.Overwrite); 
        11.                 } 
        12.                 catch (Exception ex) 
        13.                 { 
        14.                     throw ex; 
        15.                 } 
        16.             } 
        17.         } 

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

         

        default.css修改部分:

        1. .ProgressDisplay .ProgressBar { 
        2.       background-color#D7E5F7
        3.       background-imageurl("/11.gif"); /*进度条背景图片*/ 
        4.       height:20px
        5. #normalInProgress{ 
        6.      color: Red;      /*进度条字体颜色*/ 
        7. #completed{ 
        8.      color:Blue;   /*上传完成的字体颜色*/ 

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

        1. <td id="barTd" > 
        2.               <div id="statusDiv" runat="server" class="StatusMessage"> 
        3.   
        4.                    <Upload:DetailsSpan id="normalInProgress" runat="server" WhenStatus="NormalInProgress" style="font-weight: normal; white-space: nowrap;">                                <%--  正在上传时显示的   --%> 
        5.                    <%-- <%# FormatCount(BytesRead) %>/<%# FormatCount(BytesTotal) %> <%# CountUnits %> --%> 
        6.                   (<%# String.Format("{0:0%}", FractionComplete) %>) at <%# FormatRate(BytesPerSec) %> 
        7.                    <%-- - <%# FormatTimeSpan(TimeRemaining) %> left        --%> 
        8.                    </Upload:DetailsSpan> 
        9.   
        10.                    <Upload:DetailsSpan id="chunkedInProgress" runat="server" WhenStatus="ChunkedInProgress" style="font-weight: normal; white-space: nowrap;">        
        11.                     <%# FormatCount(BytesRead) %> <%# CountUnits %> 
        12.                        at <%# FormatRate(BytesPerSec) %> 
        13.                        - <%# FormatTimeSpan(TimeElapsed) %> elapsed 
        14.                    </Upload:DetailsSpan> 
        15.                    <Upload:DetailsSpan id="completed" runat="server" WhenStatus="Completed"> 
        16.                        <%--  上传完成时显示的   --%> 
        17. 完成了: <%# FormatCount(BytesRead) %> <%# CountUnits %> 
        18.                        at <%# FormatRate(BytesPerSec) %> 
        19.                        took <%# FormatTimeSpan(TimeElapsed) %> 
        20.                    </Upload:DetailsSpan> 
        21.                    <Upload:DetailsSpan id="cancelled" runat="server" WhenStatus="Cancelled"> 
        22.                        Cancelled! 
        23.                    </Upload:DetailsSpan> 
        24.                    <Upload:DetailsSpan id="rejected" runat="server" WhenStatus="Rejected"> 
        25.                        Rejected: <%# Rejection != null ? Rejection.Message : "" %> 
        26.                    </Upload:DetailsSpan> 
        27.                    <Upload:DetailsSpan id="error" runat="server" WhenStatus="Failed"> 
        28.                        Error: <%# Failure != null ? Failure.Message : "" %> 
        29.                    </Upload:DetailsSpan> 
        30.                    <Upload:DetailsDiv id="barDetailsDiv" runat="server" UseHtml4="true" 
        31.                         Width='<%# Unit.Percentage(Math.Floor(100*FractionComplete)) %>' class="ProgressBar"></Upload:DetailsDiv>  
        32.               </div> 
        33.          </td> 

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

        上传中:

         

        上传结束:

         

 

 


你可能感兴趣的:(upload)