首页 > 代码库 > FileUpload与UpdatePanel
FileUpload与UpdatePanel
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="http://www.mamicode.com/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" />
<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控件的事例方法。
FileUpload与UpdatePanel