使用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添加到項目或網站的引用中：
 

2. 在工具箱上添加項，可以得到7個工具：

 

我們主要使用我們主要使用InputFile和ProgressBar這兩個控件。
至此，NeatUpload的安裝和配置工作完成。

三、使用NeatUpload控件

1. 前臺代碼

 

3. 后臺代碼：

   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);
        }

4. 最終效果：

    

四、實例使用環境

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>  

進度條修改后還得繼續完善