當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

更新：让UpdatePanel支持上传文件

發布時間：2024/4/15 编程问答 60 豆豆

生活随笔收集整理的這篇文章主要介紹了更新：让UpdatePanel支持上传文件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在一年多前我發布了一系列文章（讓UpdatePanel支持文件上傳（1）、（2）、（3）、（4）、（5）），設法讓UpdatePanel支持上傳文件。可惜缺陷無數，當時收到了無數bug report但是我都沒有時間（和興趣）去解決，因此只是一個實驗品中的實驗品。這個組件還有一個問題就在于非常復雜，復雜的原因是為了解決iframe傳輸數據的問題。當時想了很多辦法最終讓IE6、7，FireFox 1.5支持了這個組件，但是對于Safari，Opera等瀏覽器就無能為力了。最近發現jQuery的Form插件能夠在一定程度上支持我需要的功能，于是就有了簡化并改進該控件的想法。雖然后來發現jQuery在這方面的表現并不如我想象中那么好……

客戶端通信替換機制

UpdatePanel從一開始就無法支持AJAX的文件上傳方式。Eilon Lipton寫了一篇文章解釋了這個問題的原因。文章中提供了兩個繞開此問題的方法：

將“上傳”按鈕設為一個傳統的PostBack控件而不是異步PostBack。您可以使用多種方法來這么做：例如將一個按鈕放置在UpdatePanel外，將按鈕設為某個UpdatePanel的PostBackTrigger，或者調用ScriptManager.RegisterPostBackControl來注冊它。

建立一個不使用ASP.NET AJAX的上傳頁面，很多站點已經這么做了。

不過，我們為什么不使UpdatePanel兼容FileUpload控件（<input type="file" />）呢？如果可以這樣，一定能夠受需要使用UpdatePanel上傳文件的用戶歡迎。

我們首先要解決的問題是，找到一種能夠將信息發送到服務器端的方法。我們都知道XMLHttpRequest只能發送字符串。在這里，我們使用和其他的異步上傳文件的解決方案一樣，使用iframe來上傳文件。iframe元素是一個非常有用的東西，即使在AJAX這個概念出現之前，它已經被用于制作一些異步更新的效果了。

其次，我們該如何改變UpdatePanel傳輸數據的行為？幸虧Microsoft AJAX Library有個靈活的異步通訊層，我們可以方便創建一個UpdatePanelIFrameExecutor來繼承Sys.Net.WebRequestExecutor，并且將它交給一個上傳文件的WebRequest對象。因此，下面的代碼可以作為我們開發組件的第一步：

Type.registerNamespace("AspNetAjaxExtensions");
?
AspNetAjaxExtensions.UpdatePanelIFrameExecutor = function(sourceElement)
{
??? AspNetAjaxExtensions.UpdatePanelIFrameExecutor.initializeBase(this);
?
??? // ...
}
?
AspNetAjaxExtensions.UpdatePanelIFrameExecutor.prototype =
{
??? // ...
}
AspNetAjaxExtensions.UpdatePanelIFrameExecutor.registerClass(
??? "AspNetAjaxExtensions.UpdatePanelIFrameExecutor",
???? Sys.Net.WebRequestExecutor);
?
AspNetAjaxExtensions.UpdatePanelIFrameExecutor._beginRequestHandler = function(sender, e)
{
??? var inputList = document.getElementsByTagName("input");
??? for (var i = 0; i < inputList.length; i++)
??? {
??????? var type = inputList[i].type;
??????? if (type && type.toUpperCase() == "FILE")
??????? {
??????????? e.get_request().set_executor(
??????????????? new AspNetAjaxExtensions.UpdatePanelIFrameExecutor(e.get_postBackElement()));
??????????? return;
??????? }
??? }
}
?
Sys.Application.add_init(function()
{
??? Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
??????? AspNetAjaxExtensions.UpdatePanelIFrameExecutor._beginRequestHandler);
});

在上面的代碼中，我們在頁面初始化時監聽了PageRequestManager對象的beginRequest事件。當PageRequestManager觸發了一個異步請求時，我們會檢查頁面上是否有<input type="file" />控件。如果存在的話，則創建一個UpdatePanelIFrameExecutor實例，并分配給即將執行的WebRequest對象。

根據異步通訊層的實現，WebRequest的作用只是一個保存請求信息的容器，至于如何向服務器端發送信息則完全是Executor的事情了。事實上Executor完全可以不理會WebRequest攜帶的信息自行處理，而我們的UpdatePanelIFrameExecutor就是這樣的玩意兒。它會改變頁面上的內容，將信息Post到額外的IFrame中，并且處理從服務器端獲得的數據。

服務器端組件

再來關注服務器端的組件。目前的主要問題是，我們如何讓頁面（事實上是ScriptManager控件）認為它接收到的是一個異步的回送？ScriptManager控件會在HTTP請求的Header中查找特定的項，但是我們在向IFrame中POST數據時無法修改Header。所以我們必須使用一個方法來“欺騙”ScriptManager。

目前使用的解決方案是，我們在POST數據之前在頁面中隱藏的輸入元素（<input type="hidden" />）中放入一個特定的標記，然后我們開發的服務器端組件（我把它叫做UpdatePanelFileUplaod）會在它的Init階段（OnInit方法）中在Request Body中檢查這個標記，然后使用反射來告訴ScriptManager目前的請求為一個異步請求。

但是事情并不像我們想象的那么簡單，讓我們在寫代碼之前來看一個方法：

internal sealed class PageRequestManager
{
??? // ...
?
??? internal void OnInit()
??? {
??????? if (_owner.EnablePartialRendering && !_owner._supportsPartialRenderingSetByUser)
??????? {
??????????? IHttpBrowserCapabilities browser = _owner.IPage.Request.Browser;
??????????? bool supportsPartialRendering =
??????????????? (browser.W3CDomVersion >= MinimumW3CDomVersion) &&
??????????????? (browser.EcmaScriptVersion >= MinimumEcmaScriptVersion) &&
??????????????? browser.SupportsCallback;
?
??????????? if (supportsPartialRendering)
??????????? {
??????????????? supportsPartialRendering = !EnableLegacyRendering;
??????????? }
??????????? _owner.SupportsPartialRendering = supportsPartialRendering;
??????? }
?
??????? if (_owner.IsInAsyncPostBack)
??????? {
??????????? _owner.IPage.Error += OnPageError;
??????? }
??? }

??? ...
}

上面這段代碼會在ScriptManager的OnInit方法中被調用。請注意最后加粗部分的代碼，“_owner”變量是當前頁面上的ScriptManager。在頁面收到一個真正的異步回送之后，PageRequestManager會響應頁面的Error事件，并且將錯誤信息用它定義的格式輸出。如果我們只是修改了ScriptManager的私有field，那么如果在異步回送時出現了一個未捕獲的異常，那么頁面就會輸出客戶端未知的內容，導致在客戶端解析失敗。所以我們必須保證這種情況下的輸出和真正的異步回送是相同的，于是我們就可以使用以下的做法來解決錯誤處理的問題。

internal static class FileUploadUtility
{
??? public static bool IsInUploadAsyncPostBack(HttpContext context)
??? {
??????? string[] values = context.Request.Params.GetValues("__UpdatePanelUploading__");
?
??????? if (values == null) return false;
?
??????? foreach (string value in values)
??????? {
??????????? if (value == "true")
??????????? {
??????????????? return true;
??????????? }
??????? }
?
??????? return false;
??? }
}
?
?
[PersistChildren(false)]
[ParseChildren(true)]
[NonVisualControl]
public class UpdatePanelFileUpload : Control
{
??? // ScriptManager members;
??? private readonly static FieldInfo s_isInAsyncPostBackFieldInfo;
??? private readonly static PropertyInfo s_pageRequestManagerPropertyInfo;
?
??? // PageRequestManager members;
??? private readonly static MethodInfo s_onPageErrorMethodInfo;
?
??? static UpdatePanelFileUpload()
??? {
??????? // Omitted: Initializing of the static members for reflection;
??????? ...
??? }
?
??? private bool m_pageInitialized = false;
?
??? protected override void OnInit(EventArgs e)
??? {
??????? base.OnInit(e);
?
??????? // Omitted: Initializing UpdatePanelFileUpload control on the page;
??????? ...

??????? this.IsInUploadAsyncPostBack = FileUploadUtility.IsInUploadAsyncPostBack(this.Context);
??????? if (this.IsInUploadAsyncPostBack)
??????? {
??????????? s_isInAsyncPostBackFieldInfo.SetValue(ScriptManager.GetCurrent(this.Page), true);
??????????? this.Page.Error += (sender, ea) =>
??????????? {
??????????????? s_onPageErrorMethodInfo.Invoke(
??????????????????? this.PageRequestManager, new object[] { sender, ea });
??????????? };
??????? }
??? }
?
??? public bool IsInUploadAsyncPostBack { get; private set; }
?
??? private object m_pageRequestManager;
??? private object PageRequestManager
??? {
??????? get
??????? {
??????????? if (this.m_pageRequestManager == null)
??????????? {
??????????????? this.m_pageRequestManager = s_pageRequestManagerPropertyInfo.GetValue(
??????????????????? ScriptManager.GetCurrent(this.Page), null);
??????????? }
?
??????????? return this.m_pageRequestManager;
??????? }
??? }
?
??? ...
}

這段實現并不復雜。如果Request Body中的“__UpdatePanelUploading__”的值為“true”，我們就會使用反射修改ScirptManager控件中的私有變量“_isInAsyncPostBack”。此后，我們使用了自己定義的匿名方法來監聽頁面的Error事件，當頁面的Error事件被觸發時，我們定義的新方法就會將能夠正確解析的內容發送給客戶端。

自然，UpdatePanelFileUpload也需要將程序集中內嵌的腳本文件注冊到頁面中。我為組件添加了一個開關，可以讓用戶開發人員使用編程的方式來打開/關閉對于AJAX文件上傳的支持。這部分實現更為簡單：

public bool Enabled
{
??? get { ... }
??? set { ... }
}
?
public string ExecuteMethod
{
??? get { ... }
??? set { ... }
}
?
protected override void OnPreRender(EventArgs e)
{
??? base.OnPreRender(e);
?
??? ScriptManager sm = ScriptManager.GetCurrent(this.Page);
??? if (sm.IsInAsyncPostBack || !sm.EnablePartialRendering ||
??????? this.IsInUploadAsyncPostBack || !this.Enabled)
??? {
??????? return;
??? }
?
??? if (String.IsNullOrEmpty(this.ExecuteMethod))
??? {
??????? throw new ArgumentException("Please provide the ExecuteMethod.");
??? }
?
??? ScriptReference script = new ScriptReference(
??????? "AspNetAjaxExtensions.UpdatePanelFileUpload.js",
??????? this.GetType().Assembly.FullName);
??? ScriptManager.GetCurrent(this.Page).Scripts.Add(script);
?
??? if (!String.IsNullOrEmpty(this.ExecuteMethod))
??? {
??????? this.Page.ClientScript.RegisterStartupScript(
??????????? this.GetType(),
??????????? "ExecuteMethod",
??????????? "AspNetAjaxExtensions.UpdatePanelIFrameExecutor._executeForm = " + this.ExecuteMethod + ";",
??????????? true);
??? }
}

從上面的代碼中還可以看到一個ExecuteMethod屬性，而這個屬性最終會被拼接為一段JavaScript并注冊到頁面中去。這是新版UpdatePanelFileUpload控件的新特點。這個控件最關鍵的特性是使用iframe來傳遞和接受數據，而我將實現這個功能完全交由用戶來實現。原因如下：

使用iframe進行通信非常復雜也很難寫出真正完美的代碼，因此將這部分功能轉移到控件外部，這樣用戶就可以自行修改了。
一些AJAX組件提供了使用iframe進行通信的功能（例如jQuery的Form插件），但是控件無法知道用戶的應用中是否已經用了其他客戶端框架，因此UpdatePanelFileUpload不會與任何特定的客戶端框架進行綁定。

當然，為了方便大家使用，也為了提供一個完整的解決方案，我會提供一個基于jQuery的Form插件的ExecuteMethod。在使用中也可以將其替換為適合您項目的做法，例如swfupload。

客戶端組件

UpdatePanelIFrameExecutor繼承了WebRequestExecutor，因此需要實現許多方法和屬性。但是我們事實上不用完整地實現所有的成員，因為客戶端的異步刷信機制只會訪問其中的一部分。以下是異步刷信過程中會使用的成員列表，我們必須正確地實現它們：

get_started: 表示一個Executor是否已經開始了。
get_responseAvailable: 表示一個請求是否成功。
get_timedOut: 表示一個請求是否超時。
get_aborted: 表示一個請求是否被取消了。
get_responseData: 獲得文本形式的Response Body。?
get_statusCode: 獲得Response的狀態代碼
executeRequest: 執行一個請求。
abort: 停止正在運行的請求。

UploadPanelIFrameExecutor非常簡單，只是定義了一些私有變量：

AspNetAjaxExtensions.UpdatePanelIFrameExecutor = function(sourceElement)
{
??? AspNetAjaxExtensions.UpdatePanelIFrameExecutor.initializeBase(this);
?
??? // for properties
??? this._started = false;
??? this._responseAvailable = false;
??? this._timedOut = false;
??? this._aborted = false;
??? this._responseData = null;
??? this._statusCode = null;
???
??? // the element initiated the async postback
??? this._sourceElement = sourceElement;
??? // the form in the page.
??? this._form = Sys.WebForms.PageRequestManager.getInstance()._form;
}

對于大部分屬性來說，它們的實現只不過是對上面這些私有變量進行讀取或寫入而已，在此不提。而一個Executor最重要的莫過于它的executeRequest方法，一些回調函數，還有過期定時器之類的邏輯：

executeRequest : function()
{
??? this._addAdditionalHiddenElements();
?
??? var onSuccess = Function.createDelegate(this, this._onSuccess);
??? var onFailure = Function.createDelegate(this, this._onFailure);
?
??? this._started = true;
?
??? var timeout = this._webRequest.get_timeout();
??? if (timeout > 0)
??? {
??????? this._timer = window.setTimeout(
??????????? Function.createDelegate(this, this._onTimeout), timeout);
??? }
???
??? AspNetAjaxExtensions.UpdatePanelIFrameExecutor._executeForm(
??????? this._form, onSuccess, onFailure);
},
?
_addAdditionalHiddenElements : function() { ... },
?
_removeAdditionalHiddenElements : function() { ... },
?
_onSuccess : function(responseData)
{
??? this._clearTimer();
??? if (this._aborted || this._timedOut) return;
???
??? this._statusCode = 200;
??? this._responseAvailable = true;
??? this._responseData = responseData;
???
??? this._removeAdditionalHiddenElements();
??? this.get_webRequest().completed(Sys.EventArgs.Empty);
},
?
_onFailure : function()
{
??? this._clearTimer();
??? if (this._aborted || this._timedOut) return;
???
??? this._statusCode = 500;
??? this._responseAvailable = false;
???
??? this._removeAdditionalHiddenElements();
??? this.get_webRequest().completed(Sys.EventArgs.Empty);
},
?
abort : function()
{
??? this._aborted = true;
??? this._clearTimer();
???
??? this._removeAdditionalHiddenElements();
},
?
_onTimeout : function()
{
??? this._timedOut = true;

??? this._statusCode = 500;
??? this._responseAvailable = false;

??? this._removeAdditionalHiddenElements();
??? this.get_webRequest().completed(Sys.EventArgs.Empty);
},
?
_clearTimer : function()
{
??? if (this._timer != null)
??? {
??????? window.clearTimeout(this._timer);
??????? delete this._timer;
??? }
}

如果您了解Executor的功能，那么應該很容易看懂上面的代碼：executeRequest方法用于發出請求，在executeRequest方法中還會打開一個監聽是否超時的定時器，當得到回復或超時后就會調用WebRequest的completed方法（在_onSuccess和_onFailure方法內）進行通知。不過上面這段代碼中還有兩個特別的方法“_addAddtionalHiddenElements”和“removeAdditionalHiddenElements，從名稱上就能看出，這是為這次“異步提交”而準備的額外元素。

那么我們該創建哪些附加的隱藏輸入元素呢？自然我們表示“異步回送”的自定義標記是其中之一，那么剩下的還需要哪些呢？似乎我們只能通過閱讀PageRequestManager的代碼來找到問題的答案。還好，似乎閱讀下面的代碼并不困難：

請注意加粗部分的代碼。可以發現有兩種數據需要被添加為隱藏的輸入元素。其一是ScriptManager相關的信息（第一部分的紅色代碼），其二則是變量“_additionalInput”的內容。我們很容易得到前者的值，但是后者的內容究竟是什么呢？我們繼續閱讀代碼：

_onFormElmentClick方法會在用戶點擊form中特定元素時執行。方法會提供變量“_additionalInput”的內容，然后緊接著，我們之前分析過的_onFormSubmit方法會被調用。于是只要我們對WebRequest的body屬性進行分析，就能夠輕松地得知需要像form中額外添加哪些隱藏輸入元素：

_addHiddenElement : function(name, value)
{
??? var hidden = document.createElement("input");
??? hidden.name = name;
??? hidden.value = value;
??? hidden.type = "hidden";
??? this._form.appendChild(hidden);
??? Array.add(this._hiddens, hidden);
},
?
_addAdditionalHiddenElements : function()
{
??? var prm = Sys.WebForms.PageRequestManager.getInstance();
???
??? this._hiddens = [];
???
??? this._addHiddenElement(prm._scriptManagerID, prm._postBackSettings.panelID);
??? this._addHiddenElement("__UpdatePanelUploading__", "true");
???
??? var additionalInput = null;
??? var element = this._sourceElement;
???
??? if (element.name)
??? {
??????? var requestBody = this.get_webRequest().get_body();
??????? var index = -1;
???????
??????? if (element.tagName === 'INPUT')
??????? {
??????????? var type = element.type;
??????????? if (type === 'submit')
??????????? {
??????????????? index = requestBody.lastIndexOf("&" + element.name + "=");
??????????? }
??????????? else if (type === 'image')
??????????? {
??????????????? index = requestBody.lastIndexOf("&" + element.name + ".x=");
??????????? }
??????? }
??????? else if ((element.tagName === 'BUTTON') && (element.name.length !== 0) &&
??????????? (element.type === 'submit'))
??????? {
??????????? index = requestBody.lastIndexOf("&" + element.name + "=");
??????? }
???????
??????? if (index > 0)
??????? {
??????????? additionalInput = requestBody.substring(index + 1);
??????? }
??? }
???
??? if (additionalInput)
??? {
??????? var inputArray = additionalInput.split("&");
??????? for (var i = 0; i < inputArray.length; i++)
??????? {
??????????? var nameValue = inputArray[i].split("=");
??????????? this._addHiddenElement(nameValue[0], decodeURIComponent(nameValue[1]));
??????? }
??? }
},?

至于請求結束（超時或得到結果）后用于清除那些額外元素的方法也就順理成章了：

_removeAdditionalHiddenElements : function()
{
??? var hiddens = this._hiddens;
??? delete this._hiddens;
???
??? for (var i = 0; i < hiddens.length; i++)
??? {
??????? hiddens[i].parentNode.removeChild(hiddens[i]);
??? }
???
??? hiddens.length = 0;
},

至此，我們的客戶端組件已經編寫完畢了。不過您應該產生疑問：通過IFrame傳遞數據的代碼在哪里啊？我們接下來就來解釋這個問題。

自定義Execute方法

? 之前我已經描述過這個組件的一個特點：由于使用IFrame傳遞數據的邏輯非常復雜，因此我將其與控件的邏輯進行分離，這樣用戶就可以在需要時對這部分邏輯進行修改。此外這種做法還可以避免UpdatePanelFileUpload與某個特定的JavaScript框架綁定，用戶可以選擇一個符合自己應用程序的做法來實現這部分邏輯。因此UpdatePanelFileUpload釋放出一個屬性ExecuteMethod，它會在頁面上寫上“AspNetAjaxExtensions.UpdatePanelIFrameExecutor._executeForm = ...”這樣的代碼。而ExecuteMethod會在UpdatePanelIFrameExecutor的executeRequest方法內被調用。ExecuteMethod方法接受三個參數：“form”，“onSuccess”和“onFailure”。第一個參數為需要Post的Form，而后兩個參數都為回調函數，供ExecuteMethod在合適的時候調用。

jQuery的Form插件提供了一個將內容Post到一個IFrame的功能，因此我在這里提供一個基于jQuery的方法作為示例：

原本以為jQuery的Form插件提供了一個成熟的解決方案，可惜最后發現依舊不夠完美。例如會在傳輸的結果兩邊加上“<PRE>”和“</PRE>”標簽，還會將其中的字符進行編碼，這迫使我們在得到結果后還需要進行Html Decod——這在JavaScript中可不是一件容易實現的工作。最后我從網上找了一個JavaScript版本的HTML Decode函數才算解決這個問題。此外還有一個問題就和瀏覽器密切相關了：IE中的換行字符為“\r\n”，而FireFox中的換行字符為“\n”，因此同樣的字符串經過IFrame的傳遞之后實際就改變了。在普通情況下這不會造成太大問題，不過UpdatePanel客戶端的解析邏輯與字符串長度密切相關，因此我們需要將結果中的\n替換成\r\n才能讓功能正常運行。同樣地，我們在服務器端如果手動輸出HTML時，就必須輸出\r\n而不是\n。

經過我的簡單測試，這個方法能夠支持IE6+以及FireFox 1.5+的瀏覽器，不過沒有測試過Safari或Opera瀏覽器。理論上，您可以使用更好的辦法來替換這個基于jQuery的實現，甚至您可以避免使用IFrame傳遞的方式，而改用其他的解決方案，例如swfupload。如果您發現示例中的方法有什么問題，或者有更好的做法請聯系我。

控件的使用

由于UpdatePanelFileUpload控件的工作原理是欺騙ScriptManager，將其修改為普通異步調用的狀態，因此我們要盡可能早地做到這一點。所以在使用這個控件時必須將其緊跟著ScirptManager擺放，頁面中的ScriptManager和UpdatePanelFileUpload控件之間存在任何其他ASP.NET AJAX控件，就可能會產生一些不可預知的問題。以下是附件中的使用示例：

附件：UpdatePanelFileUpload_20080503.zip

總結

以上是生活随笔為你收集整理的更新：让UpdatePanel支持上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Microsoft uaa bus dr
下一篇：从“学徒”（Apprentice III