zoukankan      html  css  js  c++  java

  • 详解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-image: url("/11.gif"); /*进度条背景图片*/ 
          4.       height:20px; 
          5. } 
          6. #normalInProgress{ 
          7.      color: Red;      /*进度条字体颜色*/ 
          8. } 
          9. #completed{ 
          10.      color:Blue;   /*上传完成的字体颜色*/ 
          11. } 

          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> 

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

          上传中：

           

          上传结束：

           
  • 相关阅读:
    Table交替行变色 鼠标经过变色　单击变色
    编程专用字体(雅黑字体+Consolas)
    Enterprise Architect学习笔记－EA中关系
    通用分页存储过程
    解决vs2008无法切换设计视图
    盒子模式
    ASP.NET界面数据绑定大大杂烩
    Tyvj P1032 Begin2 Unit1 身份验证
    NOIP2010普及组T1
    TyvjBegin P1036 Begin2 Unit1 数独验证
  • 原文地址：https://www.cnblogs.com/kingwangzhen/p/2201726.html
Copyright © 2011-2022 走看看