:Atlas在UpdatePanel里面上传附件

上次说到( 和Atlas专家探讨Atlas的一些Bug和疑问),在Atlas里面使用FileUpload上传附件有困难:UpdatePanel每次回发的只是一个XmlHttp的请求和ViewState,并没有回发整个页面,所以,在server端无法获得FileUpload的文件。

首先想到的解决方法就是不使用UpdatePanel:弹出一个新窗口,上传文件。新窗口里面不使用UpdatePanel。 这个方法当然可以。

今天忽然想起来,GMail里面的附件上传:后台上传文件,还不影响你前边邮件的编辑,也不整体页面刷新。这个模式够帅!不用打开新窗口,一个页面搞定,页面也不用刷新。

对比了一下,好象第二种方法更好一点。于是FireBug( AJAX程序的跟踪工具:fireBug0.4)了一下GMail,发现了里面的处理是这样的
< iframe  scrolling ="auto"  frameborder ="0"  onload ="try{if(top.js.init)top.js._IF_OnLoaded('v1')
< input  type ="file"  onchange ="top.js._CM_OnAttach(window,this)"  name ="f_ephki04a"  size ="50" />
他的上传附件是放在一个 iframe 里面的,然后控件的onchange事件里面有些处理。

果然是个不错的方法。
于是我做了这样的处理方案:
1:主页面中使用UpdatePanel,然后UpdatePanel里面放置的不是FileUpload控件,而是一个Iframe
2:这个iframe在链接一个新的页面,那个页面里面有FileUpload控件。
3:上传完毕后,告诉主页面上传得结果

先看一个直接使用FileUpload的例子:这个例子里面,服务端是无法找到上传文件的。
             < atlas:UpdatePanel  ID ="up1"  Mode ="Conditional"  runat ="server" >
                
< ContentTemplate >
                    
< asp:FileUpload  ID ="FileUpload1"  runat ="server"   />
                    
< asp:Button  ID ="Button1"  runat ="server"  Text ="Button"  OnClick ="Button1_Click"   />
                 
</ ContentTemplate >
            
</ atlas:UpdatePanel >

看看,我们该如何实现
1:新建主页面Default.aspx
      在适当的位置,放置一个上传附件的UpdatePanel区域
     
             < atlas:UpdatePanel  ID ="up_attachment"  Mode ="Conditional"  runat ="server" >
                
< ContentTemplate >
                   
< iframe  id ="file"  name ="file"  src ="attachment.aspx" ></ iframe >
                
</ ContentTemplate >
            
</ atlas:UpdatePanel >
2:新建上传文件的页面 attachment.aspx,然后放上FileUpload控件
< div >
    
< asp:FileUpload  ID ="FileUpload1"  runat ="server"   />
          
< asp:Button  ID ="Button1"  runat ="server"  Text ="OK"  OnClick ="Button1_Click"   />
    
</ div >
3:在 attachment.aspx里面,上传文件之后调用主页面的js,报告上传情况。这是函数原型:
     < script >
      window.top.callBack(fileName);
    
</ script >
4:Default.aspx主页面里面增加这个函数,处理返回值
  
     < script >
     function callBack(fileName)
     
{
        document.getElementById(
'Attach1').innerHTML=fileName;
     }

    
</ script >


然后,搞定。
这个方案,虽然还是两个页面,但是看起来处理都在一个页面里面,页面处理无刷新。

你可能感兴趣的:(update)