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>
然后,搞定。
这个方案,虽然还是两个页面,但是看起来处理都在一个页面里面,页面处理无刷新。
首先想到的解决方法就是不使用UpdatePanel:弹出一个新窗口,上传文件。新窗口里面不使用UpdatePanel。 这个方法当然可以。
今天忽然想起来,GMail里面的附件上传:后台上传文件,还不影响你前边邮件的编辑,也不整体页面刷新。这个模式够帅!不用打开新窗口,一个页面搞定,页面也不用刷新。
对比了一下,好象第二种方法更好一点。于是FireBug(AJAX程序的跟踪工具:fireBug0.4)了一下GMail,发现了里面的处理是这样的
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
果然是个不错的方法。
于是我做了这样的处理方案:
1:主页面中使用UpdatePanel,然后UpdatePanel里面放置的不是FileUpload控件,而是一个Iframe
2:这个iframe在链接一个新的页面,那个页面里面有FileUpload控件。
3:上传完毕后,告诉主页面上传得结果
先看一个直接使用FileUpload的例子:这个例子里面,服务端是无法找到上传文件的。
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
看看,我们该如何实现
1:新建主页面Default.aspx
在适当的位置,放置一个上传附件的UpdatePanel区域
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://dlwang2002.cnblogs.com/Images/OutliningIndicators/None.gif)
然后,搞定。
这个方案,虽然还是两个页面,但是看起来处理都在一个页面里面,页面处理无刷新。
不放到iframe里面也可以。
<iframe name="a"></iframe>
<form method="post" target="a">
<input type="file" />
</form>
这样子也可以实现无刷新的效果。
在x2blog上面学的
<iframe name="a"></iframe>
<form method="post" target="a">
<input type="file" />
</form>
这样子也可以实现无刷新的效果。
在x2blog上面学的
posted on 2006-07-11 11:18 怎能笑的私藏(藏什么呀?还没有想好,乱堆!) 阅读(753) 评论(0) 编辑 收藏 举报