让UpdatePanel支持文件上传（3）：客户端组件
2007-04-06 10:10 by 老赵, 5944 visits我们继续编写客户端的部分。
我们的UpdatePanelIFrameExecutor继承了WebRequestExecutor，因此需要实现许多方法和属性。但是我们事实上不用完整地实现所有的成员，因为客户端的异步刷信机制只会访问其中的一部分。以下是异步刷信过程中会使用的成员列表，我们必须正确地实现它们：
- get_started: 表示一个Executor是否已经开始 了。
- get_responseAvailable: 表示一个请求是否成功。
- get_timedOut: 表示一个请求是否超时。
- get_aborted: 表示一个请求是否被取消了。
- get_responseData: 获得文本形式的Response Body。
- get_statusCode: 获得Response的状态代码
- executeRequest: 执行一个请求。
- abort: 停止正在运行的请求。
UploadPanelIFrameExecutor依旧非常简单，只是定义了一些私有变量：
Jeffz.Web.UpdatePanelIFrameExecutor = function(sourceElement) { Jeffz.Web.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; // the handler to execute when the page in iframe loaded. this._iframeLoadCompleteHandler = Function.createDelegate( this, this._iframeLoadComplete); }
当executeRequest方法被调用时，我们会准备一个隐藏的iframe和所有的附加的隐藏输入元素，并将form的target指向iframe。当然，其他一些工作也是必须的，例如准备一个衡量超时的计时器：
executeRequest : function() { // create an hidden iframe this._iframe = this._createIFrame(); // all the additional hidden input elements this._addAdditionalHiddenElements(); // point the form's target to the iframe this._form.target = this._iframe.id; this._form.encType = "multipart/form-data"; // set up the timeout counter. var timeout = this._webRequest.get_timeout(); if (timeout > 0) { this._timer = window.setTimeout( Function.createDelegate(this, this._onTimeout), timeout); } this._started = true; // restore the status of the element after submitting the form setTimeout(Function.createDelegate(this, this._restoreElements), 0); // sumbit the form this._form.submit(); },
建立一个隐藏得iframe元素很简单，但是我们该创建哪些附加的隐藏输入元素呢？自然我们表示“异步回送”的自定义标记是其中之一，那么剩下的还需要哪些呢？似乎我们只能通过阅读PageRequestManager的代码来找到问题的答案。还好，似乎阅读下面的代码并不困难：
function Sys$WebForms$PageRequestManager$_onFormSubmit(evt) { // ... // Construct the form body var formBody = new Sys.StringBuilder(); formBody.append(this._scriptManagerID + '=' + this._postBackSettings.panelID + '&'); var count = form.elements.length; for (var i = 0; i < count; i++) { // ... // Traverse the input elements to construct the form body // ... } if (if._additionalInput) { formBody.append(this._additionalInput); this._additionalInput = null; } var request = new Sys.Net.WebRequest(); // ... // prepare the web request object // ... var handler = this._get_eventHandlerList().getHandler("initializeRequest"); if (handler) { var eventArgs = new Sys.WebForms.InitializeRequestEventArgs( request, this._postBackSettings.sourceElement); handler(this, eventArgs); continueSubmit = !eventArgs.get_cancel(); } // ... this._request = request; request.invoke(); // ... }
请注意红色部分的代码。可以发现有两种数据需要被添加为隐藏的输入元素。其一是ScriptManager相关的信息（第一部分的红色代码），其二则是变量“_additionalInput”的内容。我们很容易得到前者的值，但是后者的内容究竟是什么呢？我们继续阅读代码：
function Sys$WebForms$PageRequestManager$_onFormElementClick(evt) { var element = evt.target; if (element.disabled) { return; } // Check if the element that was clicked on should cause an async postback this._postBackSettings = this._getPostBackSettings(element, element.name); if (element.name) { if (element.tagName === 'INPUT') { var type = element.type; if (type === 'submit') { this._additionalInput = element.name + '=' + encodeURIComponent(element.value); } else if (type === 'image') { var x = evt.offsetX; var y = evt.offsetY; this._additionalInput = element.name + '.x=' + x + '&' + element.name + '.y=' + y; } } else if ((element.tagName === 'BUTTON') && (element.name.length !== 0) && (element.type === 'submit')) { this._additionalInput = element.name + '=' + encodeURIComponent(element.value); } } }
_onFormElmentClick方法会在用户点击form中特定元素时执行。方法会提供变量“_additionalInput”的内容，然后紧接着，我们之前分析过的_onFormSubmit方法会被调用。现在我们就能够轻松地为form添加额外的隐藏输入元素了：
_addAdditionalHiddenElements : function() { var prm = Sys.WebForms.PageRequestManager.getInstance(); // clear the array of hidden input elements this._hiddens = []; // custom sign to indicate an async postback this._addHiddenElement("__AjaxFileUploading__", "__IsInAjaxFileUploading__"); // the value related to the ScriptManager this._addHiddenElement(prm._scriptManagerID, prm._postBackSettings.panelID); // find the additional data var additionalInput = null; var element = this._sourceElement; if (element.name) { var requestBody = this.get_webRequest().get_body(); if (element.tagName === 'INPUT') { var type = element.type; if (type === 'submit') { var index = requestBody.lastIndexOf("&" + element.name + "="); additionalInput = requestBody.substring(index + 1); } else if (type === 'image') { var index = requestBody.lastIndexOf("&" + element.name + ".x="); additionalInput = requestBody.substring(index + 1); } } else if ((element.tagName === 'BUTTON') && (element.name.length !== 0) && (element.type === 'submit')) { var index = requestBody.lastIndexOf("&" + element.name + "="); additionalInput = requestBody.substring(index + 1); } } // parse the additional data 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])); } } }, _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); },
除去附加的隐藏输入元素非常简单，不值一提。另外iframe在加载结束后的逻辑也很容易理解——不过解析内容的机制就另当别论了：
_iframeLoadComplete : function() { var iframe = this._iframe; delete this._iframe; var responseText = null; try { // ... // retrieve the data we need // ... this._statusCode = 200; this._responseAvailable = true; } catch (e) { this._statusCode = 500; this._responseAvailable = false; } $removeHandler(iframe, "load", this._iframeLoadCompleteHandler); iframe.parentNode.removeChild(iframe); this._clearTimer(); this.get_webRequest().completed(Sys.EventArgs.Empty); },
我们已经快完成我们的项目了。:)
点击这里下载整个项目
![kingcat[未注册用户]](http://www.gravatar.com/avatar/d6f82e1c0b4bd7b9828e796186c7938b.jpg?d=http%3a%2f%2fblog.zhaojie.me%2fimages%2fprofile.gif&s=50)
太多了，能有个图看下思路就清晰多了