uploadFile控件和updatePanel不兼容,是微软在官方都承认的事实。现在讨论怎么来避免这个错误,有两种方式可以解决
第一种是:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
<ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" Width="400px" />
<asp:Button ID="btnUpload" runat="server" Text="上传" OnClick="btnUpload_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:UpdatePanel>
把提交上传文件的按钮放在<Triggers>标签内,而不放在<ContentTemplate>中,特别注意把UpdateMode设为Conditional。然后在btnUpload_Click方法中执行保存文件和写入数据库的操作。当然这样做,上传文件时就失去了异步交互的效果,但是,在执行其它操作的时候,都还是有Ajax特性的。
第二种是:
使用iframe来嵌入到主页面中,这种方式很好,已经试验通过。
摘自
http://www.netfocus.cn/article950.html
<
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"
/>
< SPAN>ContentTemplate>
< SPAN>atlas:UpdatePanel>
<
atlas:UpdatePanel
ID
="up_attachment"
Mode
="Conditional"
runat
="server"
>
<
ContentTemplate
>
<
iframe
id
="file"
name
="file"
src
="attachment.aspx"
>< SPAN>iframe>
< SPAN>ContentTemplate>
< SPAN>atlas:UpdatePanel>
<
div
>
<
asp:FileUpload
ID
="FileUpload1"
runat
="server"
/>
<
asp:Button
ID
="Button1"
runat
="server"
Text
="OK"
OnClick
="Button1_Click"
/>
< SPAN>div>
<
script
>
window.top.callBack(fileName);
< SPAN>script>
<
script
>
function callBack(fileName)
{
document.getElementById('Attach1').innerHTML=fileName;
}
< SPAN>script>
1:主页面中使用UpdatePanel,然后UpdatePanel里面放置的不是FileUpload控件,而是一个Iframe
2:这个iframe在链接一个新的页面,那个页面里面有FileUpload控件。
3:上传完毕后,告诉主页面上传得结果
先看一个直接使用FileUpload的例子:这个例子里面,服务端是无法找到上传文件的。
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
看看,我们该如何实现
1:新建主页面Default.aspx
在适当的位置,放置一个上传附件的UpdatePanel区域
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2:新建上传文件的页面attachment.aspx,然后放上FileUpload控件
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3:在attachment.aspx里面,上传文件之后调用主页面的js,报告上传情况。这是函数原型:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4:Default.aspx主页面里面增加这个函数,处理返回值
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)