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> 

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

          上传中：

           

          上传结束：

           
  • 相关阅读:
    工作中遇到的java 内存溢出，问题排查
    java线上内存溢出问题排查步骤
    性能测试-java内存溢出问题排查
    164 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 04 终止finally执行的方法
    163 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 03 使用多重catch结构处理异常
    162 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 02 使用try-catch结构处理异常
    161 01 Android 零基础入门 03 Java常用工具类01 Java异常 04 使用try…catch…finally实现异常处理 01 try-catch-finally简介
    160 01 Android 零基础入门 03 Java常用工具类01 Java异常 03 异常处理简介 01 异常处理分类
    159 01 Android 零基础入门 03 Java常用工具类01 Java异常 02 异常概述 02 异常分类
    158 01 Android 零基础入门 03 Java常用工具类01 Java异常 02 异常概述 01 什么是异常？
  • 原文地址：https://www.cnblogs.com/kingwangzhen/p/2201726.html
Copyright © 2011-2022 走看看