实现NeatUpload大文件上传和个性显示进度条

最新推荐文章于 2019-05-20 14:43:50 发布

zqkei

最新推荐文章于 2019-05-20 14:43:50 发布

阅读量4.4k

点赞数 1

分类专栏： ASP.NET 文章标签： upload neatupload asp.net 大文件上传多文件上传

本文链接：https://blog.csdn.net/zqkei/article/details/22957375

版权

ASP.NET 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概述

放清明假啦，宿舍的人都差不多走完了，就留下一两个宅男还在宿舍搞基。在这无聊之际，没有什么事可做，又不想把时间浪费在看视频，打游戏之类。想了想，于是就着手总结一下上次有用到的一个开源的大文件上传组件NeatUpload。

NeatUpload是由Dean Brettle在2005开始编写的一个ASP.NET组件，它允许开发人员以流的形式上传文件并存储在文件系统或数据库中，而且允许用户监控上传进度。2010年，由于Dean Brettle要去做其他的事情，就将NeatUpload交给Joe Audette管理，并将项目托管在CodePlex上。好啦，我们就不去深究它的背景情况啦，我们关心的是如何将它应用到我们自己的项目中。

首先，我们去官网下载软件，地址：
NeatUpload：http://neatupload.codeplex.com/ 我下载的是NeatUploadBinaries-1-3-26版本的。

二、安装步骤

1．将下载的安装包解压出来，把NeatUploadBinaries-1-3-26\NeatUploadBinaries目录下的NeatUpload文件夹复制到Webroot的根目录下，将NeatUploadBinaries-1-3-26\NeatUploadBinaries\bin目录下的Brettle.Web.NeatUpload.dll文件复制到相应的放DLL文件的文件夹里，一般在bin文件夹下。

2．添加引用，把Brettle.Web.NeatUpload.dll文件引用到项目中来。右键工具箱常规选项卡，选择项，打开选择工具箱项窗体。在.NET Framework组件下选择浏览，将Brettle.Web.NeatUpload.dll添加到工具箱中。这时常规选项卡下多出几个控件。我们主要用到的有InputFile、MultiFile和ProgressBar这三个控件。

三、配置neatupload上传控件，修改Web.config

  将<configuration>
  
  
   
   节点下的第一个子元素配置为：   
    <configSections>
      <sectionGroup name="system.web">
        <section name="neatUpload" type="Brettle.Web.NeatUpload.ConfigSectionHandler,Brettle.Web.NeatUpload" allowLocation="true" />
      </sectionGroup>
    </configSections>
  在<system.web>节点下加上如下配置：
    <httpModules>
         <!--大文件上传-->
         <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule,Brettle.Web.NeatUpload"/>
    </httpModules>
        <!--useHttpModule="true" 设为true时才能看到上传状态，默认是False-->
    <neatUpload useHttpModule="true" maxNormalRequestLength="1048576" maxRequestLength="1048576" defaultProvider="FilesystemUploadStorageProvider">
        <providers>
            <add name="FilesystemUploadStorageProvider" type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider, Brettle.Web.NeatUpload"/>
        </providers>
    </neatUpload>
    <httpRuntime  maxRequestLength="1048576" executionTimeout="3600"/>

四、拖拽控件在页面上，开始编程

1．单文件上传，将InputFile和ProgressBar控件加进页面中，再添加一个服务器端按钮，添加鼠标点击事件，如下：

    <script type="text/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>

    <form id="form1" runat="server">
    <div>
      <div>
        <Upload:InputFile ID="InputFile1" runat="server" />
          <asp:Button ID="upload" runat="server" Text="上传"  style="display:none"              
                       OnClientClick="ToggleVisibility('progress', 'on')" OnClick="upload_Click" />
      </div>
      <div id="progressbar">
        <Upload:ProgressBar ID="ProgressBar1" runat='server' Inline="True">
        </Upload:ProgressBar>
      </div>
    </div>
    </form>

后台代码

    protected void upload_Click(object sender,EventArgs e)
    {
        if (InputFile1.HasFile)
        {
            string FileName = this.InputFile1.FileName;//获取上传文件的文件名,包括后缀
            string ExtenName = System.IO.Path.GetExtension(FileName);//获取扩展名
            string SaveFileName = System.IO.Path.Combine(System.Web.HttpContext.Current.Request.MapPath("UpLoads/"), DateTime.Now.ToString("yyyyMMddhhmm") + ExtenName);
             //合并两个路径为上传到服务器上的全路径
            if (this.InputFile1.ContentLength > 0)
            {
                try
                {
                    this.InputFile1.MoveTo(SaveFileName, Brettle.Web.NeatUpload.MoveToOptions.Overwrite);
                   }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
            else
            {
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('选择要上传的文件为空！');",true);
            }
            string url = "UpLoads/" + DateTime.Now.ToString("yyyyMMddhhmmss") + ExtenName; //文件保存的路径
            float FileSize = (float)System.Math.Round((float)InputFile1.ContentLength / 1024000, 1); //获取文件大小并保留小数点后一位,单位是M
        }
        else
        {
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('请选择要上传的文件！');", true);
        }
    }

上传文件前界面如下：

上传文件后，界面如下：

五、修改进度条样式，主要修改default.css、Progress.aspx及ProgressBar控件的属性

default.css部分，修改进度条的颜色，背景图片，显示文字的颜色等

.ProgressDisplay .ProgressBar 
{
	background-color:#6CAF00; /*修改背景颜色*/
	background-image:url('progressbar.gif')  /*修改背景图片*/
}
#normalInProgress{
     color: Red;      /*正在上传时进度条的字体颜色*/
}
#completed{
     color:Blue;   /*上传完成的字体颜色*/
}

Progress.aspx部分，修改在整个上传过程中进度条显示的状态和信息

<Upload:DetailsSpan id="normalInProgress" runat="server" WhenStatus="NormalInProgress" style="font-weight: normal; white-space: nowrap;">
    <%--  文件正在上传时显示的   --%>
	<%-- <%# FormatCount(BytesRead) %>/<%# FormatCount(BytesTotal) %> <%# CountUnits %> --%>
	<%# FormatRate(BytesPerSec) %>       <%# String.Format("{0:0%}", FractionComplete) %>
	<%-- - 剩余时间<%# FormatTimeSpan(TimeRemaining) %> s --%>
</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="processing" runat="server" WhenStatus="ProcessingInProgress ProcessingCompleted" style="font-weight: normal; white-space: nowrap;">
	<%# ProcessingHtml %>
</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">
	上传已被取消
</Upload:DetailsSpan>
<Upload:DetailsSpan id="rejected" runat="server" WhenStatus="Rejected">
	禁止： <%# Rejection != null ? Rejection.Message : "" %>
</Upload:DetailsSpan>
<Upload:DetailsSpan id="error" runat="server" WhenStatus="Failed">
	错误: <%# Failure != null ? Failure.Message : "" %>
</Upload:DetailsSpan>

ProgressBar属性，一般修改他的高和宽，还有就是Inline="True"的属性。

这样，我们的事情就差不多完成了。最终显示效果如下：

上传前

上传中

六、总结

国外的很多软件都是开源和免费的，而且很多的软件实用性很强，我们要善于去发现和挖掘现在已经存在的东西，不断地去学习，去深入地了解其内部的运行机理。这样我们才能够把别人的思想融汇在自己的大脑中，最终变成自己的东西。就像亚里士多德所说的一样，要想成功，就必须弄清基础问题。

由于本人所学知识有限，在文中有错或者不恰之处，还望各位高人指出纠正，我将感激不尽。

zqkei

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
实现NeatUpload大文件上传和个性显示进度条

一、概述放清明假啦，宿舍的人都差不多走完了，就留下一两个宅男还在宿舍搞基。在这无聊之际，没有什么事可做，又不想把时间浪费在看视频，打游戏之类。想了想，于是就着手总结一下上次有用到的一个开源的大文件上传组件NeatUpload。 NeatUpload是由Dean Brettle在2005开始编写的一个ASP.NET组件，它允许开发人员以流的形式上传文件并存储在文件系统或数据库中
复制链接

扫一扫