NeatUpload 進度列使用方式詳細說明

 

有鑑於網路上的的資訊大部分都是不完整的，部分是錯誤的，在花了不少時間的測試與問題排除後，終於找到可以正確運作的方法。

1. 實際操作介面可參考http://www.brettle.com/Demo.aspx

2. 先到http://neatupload.codeplex.com/下載NeatUpload壓縮檔案。

3. 壓縮檔內的NeatUploadBinaries\bin\Brettle.Web.NeatUpload.dll是這次要使用的核心參考檔案。

請注意檔案版本(請看檔案內容的詳細資料)：

l 1.3.4034.20191為確定可以運作的版本

l 1.3.3034.31897為確定”不能”正常顯示進度列的版本。測試時可發現URL QueryString的prevStatus始終都為Unknown。

1.3.4034.20191之相關訊息如下：

MD5校驗值：33464845920CE706DA6A1C69FFDF5253



4. 拷貝NeatUploadBinaries\NeatUpload目錄到網站”根”目錄。

請確定為根目錄，其他目錄將無法讀取NeatUpload必須使用到的檔案（像是NeatUpload.js、Progress.js），如果你碰到Javascrip錯誤，請務必檢查這一項。

5. 新增UploadHttpModule到web.config中

<httpModules>
	<add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload" />
</httpModules> 

6. 新增web.config的sectionGroup

<sectionGroup name="system.web">
    <section name="neatUpload" requirePermission="false" type="Brettle.Web.NeatUpload.ConfigSectionHandler, Brettle.Web.NeatUpload" allowLocation="true" />
</sectionGroup>

注意：allowLocation=”true” 允許下面區段可以對個別的網頁來做設定

7. 修改web.config以變更 ASP.NET 針對實作所支援的檔案上傳大小上限，並同時設定neatUpload區段

<httpRuntime maxRequestLength="100000" />
    <neatUpload useHttpModule="false" maxRequestLength="2048" efaultProvider="FilesystemUploadStorageProvider">
        <providers>
            <add name="FilesystemUploadStorageProvider" type="Brettle.Web.NeatUpload.FilesystemUploadStorageProvider" tempDirectory="D:\WebSites\TEMP\" />
	</providers>
    </neatUpload>

注意：neatUpload的maxRequestLength必須要小於或等於httpRuntime的maxRequestLength。maxRequestLength單位為KB，最大值2097151。

如果allowLocation="false"，useHttpModule必須要設定為true。

useHttpModule=”true” && AutoStartCondition="true" 即可在網頁中見到進度條。

8. 新增web.config的location區段。

<location path="Modules/Processing.aspx">
    <system.web>
      <neatUpload useHttpModule="true" maxRequestLength="2097151" />
      <httpRuntime maxRequestLength="2097151" executionTimeout="3600" useFullyQualifiedRedirectUrl="true" />
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
</location>

注意：useHttpModule必須要設定為true，否則就算ProgressBar的AutoStartCondition=”true”還是不會顯示進度條。

9. 設定web.cong以變更 IIS7 在要求中所支援的內容最大長度。maxAllowedContentLength單位為bytes，最大值4294967295。

<system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="209715100" />
      </requestFiltering>
    </security>
</system.webServer>

注意：maxAllowedContentLength優先權高於maxRequestLength。maxAllowedContentLength預設值約為28.6MB。

也可以透IIS管理員的要求篩選來做設定：

10. 確認web.config中的trace設定，必須要為false，否則進度列不會顯示

<system.web>
    <trace enabled="false" pageOutput="true" localOnly="false" requestLimit="500" />
</system.web>

11. 在.aspx中放入

• 描述詞屬性設定：<%@ Page EnableSessionState="false" Trace="false" %>


• 註冊Tag：<%@ Register TagPrefix="Upload" Namespace="Brettle.Web.NeatUpload" Assembly="Brettle.Web.NeatUpload" %>


• 上傳控制項：<Upload:InputFile id="inputFile" runat="server" />


• 觸發用按鈕：<asp:Button ID="submitButton" runat="server" Text="Submit" />


• 進度條：<Upload:ProgressBar id="inlineProgressBar" runat="server" inline="true" Triggers="submitButton" AutoStartCondition="true" Url="/NeatUpload/progress.aspx" />

12. 在.aspx.cs中加入Page_Load()

private void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack && Request.Params["processing"] == "true")
	{
		DoProcessing();
	}
}

13. 在.aspx.cs中加入DoProcessing()

private void DoProcessing()
{
	ProgressInfo progress = inlineProgressBar.ProcessingProgress = new ProgressInfo(5000, "Units");
	//for (int i = 1; i <= 5000; i++)	{
	//	System.Threading.Thread.Sleep(1);
	//	progress.Value = i;
	//}
	progress.Text = "Processing Complete";
}

14. 在.aspx.cs中的觸發事件中的適當位置加入DoProcessing()

private void submitButton _Clicked(object sender, EventArgs e)
{
	DoProcessing();
        
        //解除System.IO.IOException Message="由於已有另一個處理序正在使用該檔案，所以無法存取該檔案。"
	inputFile.FileContent.Close();
        inputFile.MoveTo(tmpFile, MoveToOptions.Overwrite); //存檔
}

15. 進度條的實際顯示是藉由嵌入在IFrame中的/NeatUpload/progress.aspx來顯示。

• 各個Upload:DetailsSpan分別代表上傳的不同階段。可以由URL參數prevStatus看出是在哪個階段。


• <Upload:DetailsSpan id="processing" 區段為一般上傳所使用。


• <%# ProcessingHtml %>可以移除，否則會代入程式中所指定的值。這一段會在處理完畢後才使用。


• 可修改標題、顯示的文字、CSS、取消上傳的圖示等。

16. 可用參數與詳細的描述，請參考官方文件（http://neatupload.codeplex.com/documentation）。

17. 加入多國語的方式如下：

甲、將Progress.aspx第一行換成

<%@ Page Language="C#" AutoEventWireup="false" CodeFile="Progress.aspx.cs" Inherits="NeatUpload_Progress" %>

乙、加入以下程式碼到Progress.aspx.cs：

public partial class NeatUpload_Progress : Brettle.Web.NeatUpload.ProgressPage
{
    protected override void OnPreInit(EventArgs e)
    {
        CultureInfo ci = GlobalizationLibrary.Instance.GetCultureMapping(HubUtil.GetCurrentLanguage());
        Thread.CurrentThread.CurrentCulture = ci;
        Thread.CurrentThread.CurrentUICulture = ci;
    }
}