在UpdatePanel上使用FileUpload上傳檔案
首先我很遺憾的告訴大家,因為微軟的偷懶,目前UpdatePanel還不支援檔案上傳。我查了下,有兩個辦法,我已測試過了,真得很好用。
方案一的解決辦法就是UpdatePanel中設定PostBackTrigger:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="上傳" OnClick="Button1_Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
而如果你又想在這個UpdatePanel上做點花樣,比如加了一個asp:Panel, 可以通過按鈕事件觸發隱藏或顯示的,你會發現FileUpload1並不能找到檔案。。。
其實道理很簡單,UpdatePanel中的內容是通過XmlHttp實時填充的,在你讓他顯示之前,檢視頁面原始碼裡面是空的。一個動態控制元件更新普通資料沒問題,但上傳檔案就不行了,我的解決辦法是用普通div代替asp:Panel,並寫了2個函式來動態傳送控制指令碼,按鈕事件中只要呼叫該函式即可:
<div id="Panel1"></div>
private void ShowPanel()
{
string script = "document.getElementById('Panel1').style.display='';";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ShowPanel", script, true);
}
private void ClosePanel()
{
string script = "document.getElementById('Panel1').style.display='none';";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ClosePanel", script, true);
}
[轉]http://hi.baidu.com/honfei/blog/item/f0902b1190b3787bcb80c46c.html
方案二:
轉:http://www.cnblogs.com/dlwang2002/archive/2006/07/11/447722.html
上次說到(和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>
然後,搞定。
這個方案,雖然還是兩個頁面,但是看起來處理都在一個頁面裡面,頁面處理無重新整理。