Atlas：在UpdatePanel里面上传附件

Posted on 2006-07-11 09:33 随心所欲阅读(5899) 评论(34) 编辑收藏网摘所属分类: AJAX : Atlas

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

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

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

对比了一下，好象第二种方法更好一点。于是FireBug（AJAX程序的跟踪工具：fireBug0.4）了一下GMail，发现了里面的处理是这样的

他的上传附件是放在一个iframe 里面的，然后控件的onchange事件里面有些处理。

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

先看一个直接使用FileUpload的例子：这个例子里面，服务端是无法找到上传文件的。

<atlas:UpdatePanel ID="up1" Mode="Conditional" runat="server">

<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>

</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，报告上传情况。这是函数原型：

window.top.callBack(fileName);

</script>

4：Default.aspx主页面里面增加这个函数，处理返回值

function callBack(fileName)

{

document.getElementById('Attach1').innerHTML=fileName;

}

</script>

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

Feedback

#1楼  回复 引用

2006-07-11 10:18 by 同舟共济 [未注册用户]

有用

#2楼  回复 引用 查看

2006-07-11 10:28 by 阿不

确实是一个不错的方案。我有看过的无刷新的上传解决方案中也是使用iframe的，比如：AspnetUpload,FCKEditor的上传。我也来试试。

#3楼 [楼主] 回复 引用 查看

2006-07-11 10:31 by 随心所欲

@同舟共济
如果有时间，我就把他做成一个控件。

#4楼 [楼主] 回复 引用 查看

2006-07-11 10:31 by 随心所欲

@阿不
放心，测试过了，没有问题。
看起来也很帅。
虽然方法曲线了一点，但是结果是好的。

#5楼  回复 引用

2006-07-11 10:35 by leeight262 [未注册用户]

不放到iframe里面也可以。
<iframe name="a"></iframe>
<form method="post" target="a">
<input type="file" />
</form>

这样子也可以实现无刷新的效果。

在x2blog上面学的

#6楼  回复 引用 查看

2006-07-11 10:37 by 阿不

@leeight262
这样也能放在Atlas的Updatepanel吗？

#7楼 [楼主] 回复 引用 查看

2006-07-11 10:41 by 随心所欲

@leeight262
不再两个页面里了。
但是看原理，还是两个文件（两个form）中分别处理。
看起来写法简单。

不过，我还不太习惯在aspx里面放置两个form。

#8楼 [楼主] 回复 引用 查看

2006-07-11 10:42 by 随心所欲

@leeight262
应该也是个不错的选择方案，感谢。

#9楼  回复 引用

2006-07-11 10:59 by 閮界潱 [未注册用户]

基本同意

#10楼  回复 引用 查看

2006-07-11 11:30 by 亦续缘

document.getElementById('Attach1').innerHTML=fileName;

找不到ID='Attach1'.能不能说一下，谢谢！或者能不能给出个例子。

#11楼 [楼主] 回复 引用 查看

2006-07-11 11:34 by 随心所欲

@亦续缘
这种写法只是一些伪码。
意思是，把返回的值写道你自己需要的地方（就是自己用来显示的控件的ID）

如果你想测试：
你在Default.aspx里面放上一个TextBox，Id='Attach1'，就可以了。
返回的那个函数也得相应的修改成真正的函数。

#12楼  回复 引用

2006-07-14 18:10 by dddv [未注册用户]

说了这么久你都没有告诉我们哪里有Atlas下载啊。给个下载地址吧

#13楼 [楼主] 回复 引用 查看

2006-07-14 20:36 by 随心所欲

@dddv
到他的主页上去找，应该会有的
http://atlas.asp.net/default.aspx?tabid=47

#14楼  回复 引用

2006-07-21 11:43 by kiven [未注册用户]

不错的一个方法,学习中........

#15楼  回复 引用

2006-07-28 17:11 by york [未注册用户]

两个form的怎么做？给个地址

#16楼  回复 引用

2006-08-18 11:40 by snowyon [未注册用户]

我发现一个问题，用楼主的方法，虽然可以成功，但是，我发现当加入iframe时候，主页面，每当我把BUTTON1按下时候，明显页面还是刷新了，感觉UPDATEPANEL没起到作用

#17楼  回复 引用

2006-09-02 09:54 by ff [未注册用户]

不行，用不起，报错

#18楼  回复 引用

2006-09-02 09:55 by ff [未注册用户]

这个 filename是从哪里取的值??没写清楚

#19楼  回复 引用

2006-09-18 21:07 by lovan [未注册用户]

你说的这个问题，是个解决的好方法，但是只不过Default.aspx中iframe外的地方没有更新而已，并不是真正的刷新，同时还有下面一个问题：在Default.aspx里面点OKButton 的事后，浏览器最下面的状态栏还是显示着加载。我发现在magic Ajax里面也有同样的问题。这个似乎与Javascript的本质有点关系吧！期待更好的解决方案！
谢谢啊！