Javascript 在上载按钮单击时添加加载图像无效

我想要一个功能，当用户通过点击按钮上传文件时。在后台继续加载数据之前，我希望在表单中显示一个加载程序

因此，我添加了一个

div

，如下所示

<div id="divLoadingPanel" class="Loadingdiv">
    <img src="Images/loading.gif" alt="loading" />
</div>

所以，点击按钮，我从服务器端调用它，如下所示

protected void btnUploadExcelData_Click(object sender, EventArgs e)
{
    try
    {
        ClientScript.RegisterStartupScript(Page.GetType(), "loadImage", "showLoadingPanel()", true);
        UploadValidateExcelFile();
    }
    catch (Exception)
    {            
        throw;
    }
}

但是每当我点击按钮时，我都无法看到加载程序。 请说明为什么它不起作用

---

注意：当我在dropdownlist的

onchange

上使用相同的加载程序时，它正在工作。

请注意将客户端代码与服务器端代码分开。使用服务器端单击事件时，将发生回发。这意味着您的客户端代码将在客户端收到回发响应后注册为don。所以，在从向服务器发送请求到获得响应的一段时间内，不会执行任何操作。为什么在下拉列表中使用

onchange

？因为您使用的是客户端事件而不是服务器端事件！您的解决方案是使用ajax代码异步发送和接收数据，而无需任何回发（页面刷新），并使用一些javascript代码显示加载图像，直到服务器响应。如果不熟悉ajax，可以使用的第二种方法是使用.NETAjax控件，如UpdatePanel

JQuery示例：

function sendData(dataValue)
{
    $("#divLoadingPanel").show();
    $.ajax({
            type: "POST",
            url: "Your_Page/Your_Method",
            data: dataValue,                
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            },
            success: function (result) {
                alert("We returned: " + result);
            },
            complete: function(){
                $("#divLoadingPanel").hide();
            }
        });
}

---

你是如何进行后台加载的？@madalinivascu:我只是通过在

onchange

上显示一个

图像来在后台加载。示例：-
这里是工作，但不是在服务器端OK，明白了。但是有一些例子和代码对我来说会很好。你熟悉jQuery吗？或者您需要的原始javascript代码？我对jquery不太熟悉，如果您共享js代码就太好了，但是您在代码中使用的是jquery。我编辑了我的答案，为您提供jQuery示例，因为它比原始js非常简单。如果您想要js版本，可以访问。
function sendData(dataValue)
{
    $("#divLoadingPanel").show();
    $.ajax({
            type: "POST",
            url: "Your_Page/Your_Method",
            data: dataValue,                
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            },
            success: function (result) {
                alert("We returned: " + result);
            },
            complete: function(){
                $("#divLoadingPanel").hide();
            }
        });
}