使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
2012-05-04 15:59
756 查看
使用Anthem.NET1.5中的FileUpload控件实现Ajax方式的文件上传
Anthem.NET的下载与安装
Anthem.NET可以在此下载：
下载之后解压缩至硬盘中的某一目录中，编译项目得到Anthem.dll。然后将其拷贝到Web站点的bin目录下：
打开Web站点的Web.config文件，在configuration>\<system.web>\<pages>\<controls>中添加如下一行，注册Anthem.NET控件：
<addtagPrefix="anthem"namespace="Anthem"assembly="Anthem"/>
Anthem.NET提供了一套自己就带有Ajax功能的、继承于现有ASP.NET控件的服务器端控件。根据上面在web.config文件中的注册，这部分控件的前缀为anthem。
Anthem.NET支持ASP.NET1.1和ASP.NET2.0，不过本文的示例程序均基于ASP.NET2.0。
普通的ASP.NET文件上传
先看一下普通的ASP.NET文件上传功能的实现，代码如下：
<asp:FileUploadID="defaultFileUpload"runat="server"/>
<asp:ButtonID="defaultUploadButton"runat="server"
OnClick="defaultUploadButton_Click"Text="Upload"/>
<asp:LabelID="defaultResultLabel"runat="server"Text=""></asp:Label>
后台代码，只是简单地将文件名和文件大小显示出来：
protectedvoiddefaultUploadButton_Click(objectsender,EventArgse)
{defaultResultLabel.Text=string.Format("File\"{0}\"uploaded({1}bytes).",defaultFileUpload.FileName,
defaultFileUpload.FileBytes.Length
);
}
Anthem.NET的Ajax文件上传
Anthem.NET中的Ajax文件上传功能靠的是其自己的FileUpload控件，其实使用起来和普通的ASP.NETFileUpload控件差不多，下面是HTML部分的代码：
<anthem:FileUploadID="anthemFileUpload"runat="server"/>
<anthem:ButtonID="anthemUploadButton"TextDuringCallBack="uploading..."EnabledDuringCallBack="false"
runat="server"Text="Upload"OnClick="anthemUploadButton_Click"/>
<anthem:LabelID="anthemResultLabel"runat="server"Text=""></anthem:Label>
注意控件的前缀都是anthem。那个Button的TextDuringCallBack属性设置了异步回送时按钮中的文本；EnabledDuringCallBack属性让该按钮在进行异步回送时禁用，免得用户等得不耐烦。
后台代码同样是将文件名和文件大小显示出来，不过注意这一句anthemResultLabel.UpdateAfterCallBack=true;，用来在回调之后更新anthemResultLabel上的文字：
protectedvoidanthemUploadButton_Click(objectsender,EventArgse)
{anthemResultLabel.Text=string.Format("File\"{0}\"uploaded({1}bytes).",anthemFileUpload.FileName,
anthemFileUpload.FileBytes.Length
);
anthemResultLabel.UpdateAfterCallBack=true;
}
示例程序演示
示例程序的界面如下，上面部分是普通的ASP.NET文件上传，下面是Anthem.NET的Ajax文件上传：
使用普通的ASP.NET文件上传，可以看到页面有一次闪烁，不过上传功能没什么问题：
而使用下面部分的Anthem.NET的Ajax文件上传，可以看到上传时的界面（按钮禁用，文本变化）：
上传完成之后，没有页面闪烁：
打开Fiddler看看HTTP请求，上面的是传统上传，下面是Ajax的，差别显而易见……
代码下载
本文提到的完整的示例程序代码：
更多参考资料
Anthem.NET官方网站：
Anthem.NET在线文档：
Anthem.NET在线示例程序：
Fiddler官方网站：
tojeff（实现方式）
除了用IFrame，还有什么好办法么？它也是用的IFrame，相关代码如下：注意58-61,109-113,131-148这几段（粗体部分）。
有空的时候改到Atlas里面吧，呵呵，造福群众阿
functionAnthem_CallBack(url,target,id,method,args,clientCallBack,clientCallBackArg,includeControlValuesWithCallBack,updatePageAfterCallBack){if(typeof(window.Anthem_PreCallBack)=="function"){varpreCallBackResult=Anthem_PreCallBack();
if(!(typeofpreCallBackResult=="undefined"||preCallBackResult)){if(typeof(window.Anthem_CallBackCancelled)=="function"){Anthem_CallBackCancelled();
}
returnnull;
}
}
varencodedData="";
if(target=="Page"){encodedData+="&Anthem_PageMethod="+method;
}elseif(target=="MasterPage"){encodedData+="&Anthem_MasterPageMethod="+method;
}elseif(target=="Control"){encodedData+="&Anthem_ControlID="+id.split(":").join("_");encodedData+="&Anthem_ControlMethod="+method;
}
if(args){for(varargsIndex=0;argsIndex<args.length;++argsIndex){if(args[argsIndex]instanceofArray){for(vari=0;i<args[argsIndex].length;++i){encodedData+="&Anthem_CallBackArgument"+argsIndex+"="+Anthem_Encode(args[argsIndex][i]);
}
}else{encodedData+="&Anthem_CallBackArgument"+argsIndex+"="+Anthem_Encode(args[argsIndex]);
}
}
}
if(updatePageAfterCallBack){encodedData+="&Anthem_UpdatePage=true";
}
//AnthemwillnormallyuseanXmlHttpRequesttocommunicatewiththeserver.
//ButifanAnthem.FileUploadcontrolisdiscoveredonthepage,thenAnthem
//willuseahiddenIFRAMEinstead.ThishiddenIFRAMEisoftencalledanIOFrame
//byAJAXlibraryauthors,sothatisthenameweusehere.
varuseIOFrame=false;
//Scanthecontrolsontheformandextracttheirvalues.
if(includeControlValuesWithCallBack){varform=Anthem_GetForm();
if(form!=null){for(varelementIndex=0;elementIndex<form.length;++elementIndex){varelement=form.elements[elementIndex];
if(element.name){varelementValue=null;
if(element.nodeName.toUpperCase()=="INPUT"){varinputType=element.getAttribute("type").toUpperCase();if(inputType=="TEXT"||inputType=="PASSWORD"||inputType=="HIDDEN"){elementValue=element.value;
}elseif(inputType=="CHECKBOX"||inputType=="RADIO"){if(element.checked){elementValue=element.value;
}
}elseif(inputType=="FILE"){//IftheFILEelementhasavalue(thepathtothefile),thenan
//IOFramewillbeusedtohandlethecallback.
useIOFrame=useIOFrame|!(element.value==null||element.value.length==0);
}
}elseif(element.nodeName.toUpperCase()=="SELECT"){if(element.multiple){elementValue=[];
for(vari=0;i<element.length;++i){if(element.options[i].selected){elementValue.push(element.options[i].value);
}
}
}elseif(element.length==0){elementValue=null;
}else{elementValue=element.value;
}
}elseif(element.nodeName.toUpperCase()=="TEXTAREA"){elementValue=element.value;
}
if(elementValueinstanceofArray){for(vari=0;i<elementValue.length;++i){encodedData+="&"+element.name+"="+Anthem_Encode(elementValue[i]);
}
}elseif(elementValue!=null){encodedData+="&"+element.name+"="+Anthem_Encode(elementValue);
}
}
}
//ASP.NET1.1won'tfireanyeventsifneitherofthefollowing
//twoparametersarenotintherequestsomakesurethey're
//alwaysintherequest.
if(typeofform.__VIEWSTATE=="undefined"){encodedData+="&__VIEWSTATE=";
}
if(typeofform.__EVENTTARGET=="undefined"){encodedData+="&__EVENTTARGET=";
}
}
}
if(encodedData.length>0){encodedData=encodedData.substring(1);
}
if(typeof(Anthem_DebugRequestText)=="function"){Anthem_DebugRequestText(encodedData.split("&").join("\n&"));}
//Sendthecallbackrequesttotheserver.UseanIOFrameifthereisafileupload,
//otherwiseuseanXmlHttpRequest.
if(useIOFrame){//Toallowmultiplerequestsatthesametime,alloftheAnthemparametersare
//passedtotheserverviathequerystring
varaction=Anthem_GetCallBackUrl();
action=action+"&Anthem_IOFrame=true";
if(updatePageAfterCallBack){action=action+"&Anthem_UpdatePage=true";
}
//WecouldgenerateananonymousfunctionontheflytohandletheclientCallBack
//andassignthattotheiframeonloadevent(infactthisishowXmlHttpRequestsare
//handled).Butthatmakesitveryhardtodebugthecallbackresponse.Instead
//wewillstufftheclientCallBackfunctionandargsintoanarrayandthenhardcode
//theonloadeventhandler.Thehandlerwillfindtheappropriatecallbackinfoin
//thearrayandhandletheclientCallBack.
varid="f"+newString(Math.floor(9999*Math.random()));//Generateframenumber
if(typeof(clientCallBack)=="function"){varframe={"id":id,"clientCallBack":clientCallBack,"clientCallBackArg":clientCallBackArg};callbackFrames.push(frame);
}
//Createanew,invisibleiframetohandletheio.
varioframe=null;
if(window.ActiveXObject){ioframe=document.createElement("<iframename=\""+id+"\"id=\""+id+"\"onload=\"Anthem_HandleIOFrameResponse('"+id+"');\"/>");}else{ioframe=document.createElement("iframe");ioframe.id=id;
ioframe.name=id;
ioframe.onload=function(){Anthem_HandleIOFrameResponse(id);}}
ioframe.style.visibility="hidden";
ioframe.style.height="1px";
document.body.appendChild(ioframe);
//Submitthisforminthehiddeniframe
vartheForm=Anthem_GetForm();
vartempActionUri=theForm.action;
theForm.action=action;
theForm.target=id;
try{theForm.submit();
}catch(e){result={"value":null,"error":e.message};if(typeof(Anthem_DebugError)=="function"){Anthem_DebugError(e.name+":"+e.message+"("+e.number+")");}
if(typeof(window.Anthem_Error)=="function"){Anthem_Error(result);
}
}
//Restoretheform
theForm.target="";
theForm.action=tempActionUri;
}else{varx=Anthem_GetXMLHttpRequest();
varresult=null;
if(!x){result={"value":null,"error":"NOXMLHTTP"};if(typeof(Anthem_DebugError)=="function"){Anthem_DebugError(result.error);
}
if(typeof(window.Anthem_Error)=="function"){Anthem_Error(result);
}
if(typeof(clientCallBack)=="function"){clientCallBack(result,clientCallBackArg);
}
returnresult;
}
varaction=Anthem_GetCallBackUrl();
x.open("POST",url?url:action,clientCallBack?true:false);x.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");x.setRequestHeader("Accept-Encoding","gzip,deflate");if(typeof(clientCallBack)=="function"){x.onreadystatechange=function(){if(x.readyState!=4){return;
}
if(typeof(Anthem_DebugResponseText)=="function"){Anthem_DebugResponseText(x.responseText);
}
result=Anthem_GetResult(x);
if(result.error){if(typeof(Anthem_DebugError)=="function"){Anthem_DebugError(result.error);
}
if(typeof(window.Anthem_Error)=="function"){Anthem_Error(result);
}
}
if(updatePageAfterCallBack){Anthem_UpdatePage(result);
}
Anthem_EvalClientSideScript(result);
clientCallBack(result,clientCallBackArg);
x=null;
if(typeof(window.Anthem_PostCallBack)=="function"){Anthem_PostCallBack();
}
}
}
x.send(encodedData);
if(typeof(clientCallBack)!="function"){if(typeof(Anthem_DebugResponseText)=="function"){Anthem_DebugResponseText(x.responseText);
}
result=Anthem_GetResult(x);
if(result.error){if(typeof(Anthem_DebugError)=="function"){Anthem_DebugError(result.error);
}
if(typeof(window.Anthem_Error)=="function"){Anthem_Error(result);
}
}
if(updatePageAfterCallBack){Anthem_UpdatePage(result);
}
Anthem_EvalClientSideScript(result);
if(typeof(window.Anthem_PostCallBack)=="function"){Anthem_PostCallBack();
}
}
}
returnresult;
}
分类:
AJAX(Atlas)
绿色通道：
1
0
您已推荐过，
AJAX(Atlas)拖放（Drag&Drop）功能6种实现方法总结
本贴子以“现状”提供且没有任何担保，同时也没有授予任何权利
Thispostingisprovided"ASIS"withnowarranties,andconfersnorights.
postedon2007-03-2512:10
评论:
从1.2的版本的时候就开始用了，反而觉得1.2的版本比较稳定。1.3以上包括使用1.5的当过程较复杂的时候经常使用UpdateAfterCallback=true这句话是都是没有反应更新不了，使用回1.2的控件就可以不知道你碰到这样的情况没有。
12:25|
@Neo.h
1.2的时候还没有FileUpload吧？
我也是浅尝辄止随便试试看，呵呵，没什么实际使用经验。不过版本越高，估计功能就越丰富，自然出错的可能性就大了……
@dflying
不好意思，没表达清楚。我说的不只是FileUpload，Anthem.NET里面的所有控件基本上都有UpdateAfterCallback这个方法，用来通知控件更新显示的方法。1.2里面也有，1.5也有。只不过使用1.2从来没有这样的问题，1.3的版本出来以后就碰到这样的问题，到1.5那天我去下载来试了一下还是有这样的问题。在IE里面设置了允许客户端调试，发现当很多的控件集合在一起使用的时候方法里面所有的过程都执行了一遍，最后执行UpdateAfterCallback=true；还是没有更新控件的显示，换到了1.2的版本显示又正常了。真是挺怪的。所以到了现在还是用回1.2版本的，觉得还是1.2实用。
12:38|
@Neo.h
恩，如果自己解决不了的话，给开发者发一个Bug吧，呵呵
功能丰富了，可能一些bug就会出现
@Dflying
谢谢你的建议，以后如果你有研究Anthem.NET这方面话的希望大家能互相交流学习。
12:50|
@Neo.h
谢谢你的关注，欢迎常来看看，我们一起探讨！
Zhao
对于实现很感兴趣，能不能介绍一下啊？:)
关注，不过现在暂时不怎么做.net了。
14:13|
@JeffreyZhao
更新在文章中了……本来想贴在回复中，没想到居然是这个错误？？？
---------------------------
Error
---------------------------
ARuntimeErrorhasoccurred.
DoyouwishtoDebug?
Line:279
Error:Thediskisfull.
---------------------------
YesNo
---------------------------
14:13|
除了用IFrame，还有什么好办法么？它也是用的IFrame，相关代码如下：注意58-61,109-113,131-148这几段。
有空的时候改到Atlas里面吧，呵呵，造福群众阿
functionAnthem_CallBack(url,target,id,method,args,clientCallBack,clientCallBackArg,includeControlValuesWithCallBack,updatePageAfterCallBack){
if(typeof(window.Anthem_PreCallBack)=="function"){
varpreCallBackResult=Anthem_PreCallBack();
if(!(typeofpreCallBackResult=="undefined"||preCallBackResult)){
if(typeof(window.Anthem_CallBackCancelled)=="function"){
Anthem_CallBackCancelled();
}
returnnull;
}
}
varencodedData="";
if(target=="Page"){
encodedData+="&Anthem_PageMethod="+method;
}elseif(target=="MasterPage"){
encodedData+="&Anthem_MasterPageMethod="+method;
}elseif(target=="Control"){
encodedData+="&Anthem_ControlID="+id.split(":").join("_");
encodedData+="&Anthem_ControlMethod="+method;
}
if(args){
for(varargsIndex=0;argsIndex<args.length;++argsIndex){
if(args[argsIndex]instanceofArray){
for(vari=0;i<args[argsIndex].length;++i){
encodedData+="&Anthem_CallBackArgument"+argsIndex+"="+Anthem_Encode(args[argsIndex][i]);
}
}else{
encodedData+="&Anthem_CallBackArgument"+argsIndex+"="+Anthem_Encode(args[argsIndex]);
}
}
}
if(updatePageAfterCallBack){
encodedData+="&Anthem_UpdatePage=true";
}
//AnthemwillnormallyuseanXmlHttpRequesttocommunicatewiththeserver.
//ButifanAnthem.FileUploadcontrolisdiscoveredonthepage,thenAnthem
//willuseahiddenIFRAMEinstead.ThishiddenIFRAMEisoftencalledanIOFrame
//byAJAXlibraryauthors,sothatisthenameweusehere.
varuseIOFrame=false;
//Scanthecontrolsontheformandextracttheirvalues.
if(includeControlValuesWithCallBack){
varform=Anthem_GetForm();
if(form!=null){
for(varelementIndex=0;elementIndex<form.length;++elementIndex){
varelement=form.elements[elementIndex];
if(element.name){
varelementValue=null;
if(element.nodeName.toUpperCase()=="INPUT"){
varinputType=element.getAttribute("type").toUpperCase();
if(inputType=="TEXT"||inputType=="PASSWORD"||inputType=="HIDDEN"){
elementValue=element.value;
}elseif(inputType=="CHECKBOX"||inputType=="RADIO"){
if(element.checked){
elementValue=element.value;
}
}elseif(inputType=="FILE"){
//IftheFILEelementhasavalue(thepathtothefile),thenan
//IOFramewillbeusedtohandlethecallback.
useIOFrame=useIOFrame|!(element.value==null||element.value.length==0);
}
}elseif(element.nodeName.toUpperCase()=="SELECT"){
if(element.multiple){
elementValue=[];
for(vari=0;i<element.length;++i){
if(element.options[i].selected){
elementValue.push(element.options[i].value);
}
}
}elseif(element.length==0){
elementValue=null;
}else{
elementValue=element.value;
}
}elseif(element.nodeName.toUpperCase()=="TEXTAREA"){
elementValue=element.value;
}
if(elementValueinstanceofArray){
for(vari=0;i<elementValue.length;++i){
encodedData+="&"+element.name+"="+Anthem_Encode(elementValue[i]);
}
}elseif(elementValue!=null){
encodedData+="&"+element.name+"="+Anthem_Encode(elementValue);
}
}
}
//ASP.NET1.1won'tfireanyeventsifneitherofthefollowing
//twoparametersarenotintherequestsomakesurethey're
//alwaysintherequest.
if(typeofform.__VIEWSTATE=="undefined"){
encodedData+="&__VIEWSTATE=";
}
if(typeofform.__EVENTTARGET=="undefined"){
encodedData+="&__EVENTTARGET=";
}
}
}
if(encodedData.length>0){
encodedData=encodedData.substring(1);
}
if(typeof(Anthem_DebugRequestText)=="function"){
Anthem_DebugRequestText(encodedData.split("&").join("\n&"));
}
//Sendthecallbackrequesttotheserver.UseanIOFrameifthereisafileupload,
//otherwiseuseanXmlHttpRequest.
if(useIOFrame){
//Toallowmultiplerequestsatthesametime,alloftheAnthemparametersare
//passedtotheserverviathequerystring
varaction=Anthem_GetCallBackUrl();
action=action+"&Anthem_IOFrame=true";
if(updatePageAfterCallBack){
action=action+"&Anthem_UpdatePage=true";
}
//WecouldgenerateananonymousfunctionontheflytohandletheclientCallBack
//andassignthattotheiframeonloadevent(infactthisishowXmlHttpRequestsare
//handled).Butthatmakesitveryhardtodebugthecallbackresponse.Instead
//wewillstufftheclientCallBackfunctionandargsintoanarrayandthenhardcode
//theonloadeventhandler.Thehandlerwillfindtheappropriatecallbackinfoin
//thearrayandhandletheclientCallBack.
varid="f"+newString(Math.floor(9999*Math.random()));//Generateframenumber
if(typeof(clientCallBack)=="function"){
varframe={"id":id,"clientCallBack":clientCallBack,"clientCallBackArg":clientCallBackArg};
callbackFrames.push(frame);
}
//Createanew,invisibleiframetohandletheio.
varioframe=null;
if(window.ActiveXObject){
ioframe=document.createElement("<iframename=\""+id+"\"id=\""+id+"\"onload=\"Anthem_HandleIOFrameResponse('"+id+"');\"/>");
}else{
ioframe=document.createElement("iframe");
ioframe.id=id;
ioframe.name=id;
ioframe.onload=function(){Anthem_HandleIOFrameResponse(id);}
}
ioframe.style.visibility="hidden";
ioframe.style.height="1px";
document.body.appendChild(ioframe);
//Submitthisforminthehiddeniframe
vartheForm=Anthem_GetForm();
vartempActionUri=theForm.action;
theForm.action=action;
theForm.target=id;
try{
theForm.submit();
}catch(e){
result={"value":null,"error":e.message};
if(typeof(Anthem_DebugError)=="function"){