在现代Web应用中，用户体验至关重要。为了提升用户体验，希望在上传文件时不重新加载整个页面，并且能够在上传过程中显示一个加载动画。本文将探讨如何使用ASP.NET和JavaScript实现这一功能。
首先，需要创建一个ASPX页面（例如：FileUpload.aspx）。这个页面将包含多个控件，但最关键的是文件上传控件和按钮控件。页面背后的代码将在用户点击按钮时保存文件：
protected void btnUpload_Click(object sender, EventArgs e)
{
string rootFolder = ConfigurationManager.AppSettings["RootFolder"].ToString();
string fileName = rootFolder + @"\ProfileName.doc";
FileUpload1.SaveAs(fileName);
pnlUpload.Visible = false;
pnlAfterUpload.Visible = true;
}
接下来，需要创建另一个页面（例如：Default.aspx）。这个页面没有代码，但在HTML中，将添加一个iframe，其src属性指向FileUpload.aspx页面。还将添加一个img标签用于加载动画，如下所示：
<div style="border-width:1px;border-bottom-style:solid;border-color:#F3F3F3">
<iframe id="iUploadFile" frameborder="0" src="IFrame/FileUpload.aspx"></iframe>
<img id="imgLoading" src="Images/loading.gif" style="display:none" />
</div>
最后一步是修改代码，以便在FileUpload.aspx页面的提交按钮被点击时显示加载动画，并在上传完成后隐藏加载动画。为此，需要在FileUpload.aspx页面添加以下JavaScript函数：
function HideProgress() {
parent.document.getElementById("imgLoading").style.display = 'none';
parent.document.getElementById("iUploadFile").style.display = 'block';
}
function ShowProgress() {
parent.document.getElementById("imgLoading").style.display = 'block';
parent.document.getElementById("iUploadFile").style.display = 'none';
}
现在，需要在点击提交按钮时调用ShowProgress()函数。为此，需要设置按钮的OnClientClick属性：
<asp:Button ForeColor="#FFFFFF" BackColor="#00cc00" OnClientClick="ShowProgress();" Text="Upload Your File" ID="btnUpload" runat="server" OnClick="btnUpload_Click" />
上传文件完成后，需要调用HideProgress()函数。为此，需要在FileUpload.aspx页面用于保存文件的代码后添加以下代码行：
Page.ClientScript.RegisterStartupScript(this.GetType(), "CloseProgressbar", "HideProgress();", true);
通过以上步骤，可以实现在不刷新页面的情况下上传文件，并在上传过程中显示加载动画，从而提升用户体验。