NeatUpload大文件上传控件
时间:2018/1/15 14:41:41    浏览次数:6786 来源:本站作者:Tom Jiang

使用NeatUpload控件实现ASP.NET大文件上传

一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。NeatUpload是一款为数不多的开源、免费的文件上传控件,不仅支持大文件上传,而且还显示上传进度。下面我们来介绍一下NeatUpload控件的使用方法。


一、下载NeatUpload并解压在任意位置
http://neatupload.codeplex.com/releases/view/59339,可以下载到最新的NeatUpload,目前最新版本应该是NeatUploadBinaries-1-3-26,解压后可以得到如下文件:
 


二、安装配置NeatUpload控件(.Net Framework2.0环境及以上版本)
1. 将bin/中Brettle.Web.NeatUpload.dll添加到项目或网站的引用中:
 


  1. 在工具箱上添加项,可以得到7个工具:
 


我们主要使用我们主要使用InputFile和ProgressBar这两个控件。
至此,NeatUpload的安装和配置工作完成。


三、使用NeatUpload控件


1. 前台代码


 
  1. 后台代码:
   if (AttachFile.HasFile)
        {
            string FileName = this.AttachFile.FileName;//获取上传文件的文件名,包括后缀
            string ExtenName = System.IO.Path.GetExtension(FileName);//获取扩展名
            string _datePath = DateTime.Now.ToString("yyyyMMdd") + "/";
            string toFileFullPath = HttpContext.Current.Server.MapPath("~/File_Upload/" + _datePath);
            //检查是否有该路径没有就创建
            if (!Directory.Exists(toFileFullPath))
            {
                Directory.CreateDirectory(toFileFullPath);
            }
            string SaveFileName = System.IO.Path.Combine(
                    System.Web.HttpContext.Current.Request.MapPath("~/File_Upload/"),
                  _datePath + DateTime.Now.ToString("yyyyMMddhhmm") + ExtenName);//合并两个路径为上传到服务器上的全路径
            if (this.AttachFile.ContentLength > 0)
            {
                try
                {
                    AttachFile.MoveTo(SaveFileName, Brettle.Web.NeatUpload.MoveToOptions.Overwrite);
                    result = "/File_Upload/" + _datePath + DateTime.Now.ToString("yyyyMMddhhmmss") + ExtenName;
                }
                catch (Exception ex)
                {
                    throw ex;
                }
                string url = "/File_Upload/" + _datePath + DateTime.Now.ToString("yyyyMMddhhmmss") + ExtenName;  //文件保存的路径
                float FileSize = (float)System.Math.Round((float)AttachFile.ContentLength / 1024000, 1); //获取文件大小并保留小数点后一位,单位是M
            }
            else
            {

                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('选择要上传的文件为空!');", true);

            }
        }
        else
        {
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "警告", "alert('请选择要上传的文件!');", true);
        }
  1. 最终效果:
    


四、实例使用环境


1. 使用环境VS2012+.Net Framework2.0,如果是在.Net Framework 3.5及其以上版本使用安装和配置会更简单。
五、 常见问题


1.
解决方法是在system.webServer节中加入以下内容,让服务器允许的最大请求量增加,如下设置的是1G:


<system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true" />
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="1073741824" />
      </requestFiltering>
    </security>
  </system.webServer>


另外,不行的话还得修改IIS配置

选中自己的站点,并双击“请求筛选”,选择右侧的”编辑功能限制”,在弹出的页面中,我们看到默认请求限制正是30M,修改请求大小限制为合适的值即可,保存后重启站点即可。


 
2.

最可能的原因:
   此应用程序在system.web/httpModules节中定义配置;
解决方法是将system.web节的“UploadHttpModules"配置调整到system.webServer节中,以适应在托管管道模式下运行应用程序:
<httpModules>
      <add type="URLRewriter.ModuleRewriter, URLRewriter" name="ModuleRewriter" />
      <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule,Brettle.Web.NeatUpload"/>
</httpModules>


三:关于进度条的设置及使用
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>


控件生成
<div class="col-sm-5">                                       
   <Upload:InputFile ID="AttachFile" runat="server" />  
   <Upload:ProgressBar ID="ProgressBar1" runat='server' >
</Upload:ProgressBar> </div>
点击事件


<asp:Button ID="btnSave" runat="server" Text="保存" CssClass="btn btn-primary" OnClick="btnSave_Click" OnClientClick="ToggleVisibility('progressbar', 'on')"/>  
4、  修改进度条样式,主要修改default.css、Progress.aspx及ProgressBar控件的属性

将压缩包解压后的NeatUpload文件复制粘贴到自己的项目中


 


 
修改这两个文件:


 


 
 default.css部分,修改进度条的颜色,背景图片,显示文字的颜色等
  1. .ProgressDisplay .ProgressBar   
  2. {  
  3.     background-color:#6CAF00; /*修改背景颜色*/  
  4.     background-image:url('progressbar.gif')  /*修改背景图片*/  
  5. }  
  6. #normalInProgress{  
  7.      color: Red;      /*正在上传时进度条的字体颜色*/  
  8. }  
  9. #completed{  
  10.      color:Blue;   /*上传完成的字体颜色*/  
  11. }  
 
Progress.aspx部分,修改在整个上传过程中进度条显示的状态和信息
  1. <Upload:DetailsSpan id="normalInProgress" runat="server" WhenStatus="NormalInProgress" >  
  2.     <%--  文件正在上传时显示的   --%>  
  3.     <%-- <%# FormatCount(BytesRead) %>/<%# FormatCount(BytesTotal) %> <%# CountUnits %> --%>  
  4.     <%# FormatRate(BytesPerSec) %>       <%# String.Format("{0:0%}", FractionComplete) %>  
  5.     <%-- - 剩余时间<%# FormatTimeSpan(TimeRemaining) %> s --%>  
  6. </Upload:DetailsSpan>  
  7. <Upload:DetailsSpan id="chunkedInProgress" runat="server" WhenStatus="ChunkedInProgress" >  
  8.     <%# FormatCount(BytesRead) %> <%# CountUnits %>  
  9.     at <%# FormatRate(BytesPerSec) %>  
  10.     - <%# FormatTimeSpan(TimeElapsed) %> elapsed  
  11. </Upload:DetailsSpan>  
  12. <Upload:DetailsSpan id="processing" runat="server" WhenStatus="ProcessingInProgress ProcessingCompleted" >  
  13.     <%# ProcessingHtml %>  
  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.     上传已被取消  
  23. </Upload:DetailsSpan>  
  24. <Upload:DetailsSpan id="rejected" runat="server" WhenStatus="Rejected">  
  25.     禁止: <%# Rejection != null ? Rejection.Message : "" %>  
  26. </Upload:DetailsSpan>  
  27. <Upload:DetailsSpan id="error" runat="server" WhenStatus="Failed">  
  28.     错误: <%# Failure != null ? Failure.Message : "" %>  
  29. </Upload:DetailsSpan>  
进度条修改后还得继续完善   


Contact联系我们
告诉我们您想要的吧!我们为当地客户提供专业、及时的服务。

地址:云南省昆明市白云路368号

电话:400-871-8716     (工作时间:09:00-18:00(周一至周五))

何总:23592693

李总:53815112