在Atlas里面使用FileUpload上传附件有困难:UpdatePanel每次回发的只是一个XmlHttp的请求和ViewState,并没有回发整个页面,所以,在server端无法获得FileUpload的文件。
首先想到的解决方法就是不使用UpdatePanel:弹出一个新窗口,上传文件。新窗口里面不使用UpdatePanel。 这个方法当然可以。
今天忽然想起来,GMail里面的附件上传:后台上传文件,还不影响你前边邮件的编辑,也不整体页面刷新。这个模式够帅!不用打开新窗口,一个页面搞定,页面也不用刷新。
对比了一下,好象第二种方法更好一点。于是FireBug( AJAX程序的跟踪工具:fireBug0.4
)了一下GMail,发现了里面的处理是这样的
<iframe scrolling="auto" frameborder="0" http://www.cnblogs.com/Images/dot.gif" border=0>

<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
他的上传附件是放在一个iframe 里面的,然后控件的onchange事件里面有些处理。
果然是个不错的方法。
于是我做了这样的处理方案:
1:主页面中使用UpdatePanel,然后UpdatePanel里面放置的不是FileUpload控件,而是一个Iframe
2:这个iframe在链接一个新的页面,那个页面里面有FileUpload控件。
3:上传完毕后,告诉主页面上传得结果
先看一个直接使用FileUpload的例子:这个例子里面,服务端是无法找到上传文件的。
看看,我们该如何实现
1:新建主页面Default.aspx
在适当的位置,放置一个上传附件的UpdatePanel区域
2:新建上传文件的页面 attachment.aspx
3:在 attachment.aspx
4:Default.aspx主页面里面增加这个函数,处理返回值
本文介绍了一种在Ajax环境中利用Iframe实现文件上传的有效方法,解决了UpdatePanel导致的文件无法正常上传的问题。通过将文件上传操作置于Iframe内,不仅避免了页面刷新,还实现了文件上传与页面交互的无缝衔接。
6248

被折叠的 条评论
为什么被折叠?



