FileUpload与UpdatePanel

Posted 2020-09-29 Matrix博客园

UpdatePanel是Asp.net实现页面部分刷新所使用的控件。还是挺不错的控件，避免了不少因为刷新所带来的不良用户体验(点击Asp.net按钮触发页面刷新，清楚text box中的内容)。但UpdatePanel是不能与FileUpload同时使用的。这也是微软明确指出的问题。同时使用FileUpload与UpdatePanel需要“耍点小聪明”。一个切实可行的方法是结合IFrame一起使用。使用UpdatePanel包含一个IFrame，然后写一个上传文件的页面，将这个页面放到IFrame里面。具体实现如下：

1. 在主页面Test.aspx中使用UpdatePanel包住Iframe
...
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
　　<ContentTemplate>
　　　　<iframe id="uploadFile" name="uploadFile" src="FileUpload.aspx" style="border-style: none"></iframe>
　　</ContentTemplate>
</asp:UpdatePanel>
...
IFrame的src属性指向有FileUpload控件的页面FileUpload.aspx。

 

2. 在FileUpload.aspx页面中放置FileUpload控件
...
<asp:FileUpload ID="fileUploadImage" runat="server" />&nbsp;
<asp:Button ID="btnUploadImage" runat="server" Text="上传" OnClick="btnUploadImage_Click" />
...
这样就可以实现FileUpload与UpdatePanel同时使用。但这还远远不足！主页面需要和iframe中的页面进行交互才满足实际需求。交互可以通过javascript来实现。具体如下:

1. 在FileUpload.aspx(包含在iframe页面中的页面)调用主页面的JavaScript
在FileUpload.aspx中定义以下JavaScript:
function callBack()
{
　　var fileName = $("#hdfTmpPath").val();
　　window.parent.callBack(fileName); //调用主页面JavaScript
}

在主页面Test.aspx中定义被上面调用的JavaScript:
function callBack(fileName)
{
　　$("#hdfTmpPath").val(fileName)
}

 

2. 在主页面Test.aspx调用FileUpload.aspx的JavaScript
在FileUpload.aspx中定义以下JavaScript供主页面调用:
function UploadWindowJavaScript(参数)
{
　　if(参数)
　　{
　　　　//运行代码
　　}
}

在主页面使用以下代码调用FileUpload.aspx中的JavaScript
document.getElementById("uploadFile").contentWindow.UploadWindowJavaScript(参数); //主页面调用FileUpload中的JavaScript

 

以上便是同时使用UpdatePanel和FileUpload控件的事例方法。