Question

在后面的代码（upload.aspx）中，我有一个事件返回流式传输的字节数;当我调试它，它工作正常。我想在进度条上反映事件处理程序返回的数字，这就是我迷路的地方。我尝试使用jQuery的.ajax（）函数。这就是我实现它的方式：

在我后面的代码中的EventHandler中，我添加了这段代码来调用.ajax（）函数：

Page.ClientScript.RegisterStartupScript(this.GetType(), "UpdateProgress", "<script type='text/javascript'>updateProgress();</script>");

我的计划是每当eventHandler函数更改正在流式传输的字节值时，它调用javascript函数“updateProgress（）”

.ajax（）函数“UpdateProgress（）”如下：

function updateProgress() {

        $.ajax({
            type: "POST",
            url: "upload.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (msg) {

                $("#progressbar").progressbar("option", "value", msg.d);

            }
        });
    }

我确保函数GetData（）是[System.Web.Services.WebMethod]并且它也是静态的。所以我想要实现的工作流程如下： - 单击“上载”按钮 - Behind代码开始执行并且EventHandler触发 - EventHandler调用.ajax（）函数 - .ajax（）函数检索正在流式传输的字节并更新进度条。

当我运行代码时;所有运行良好，除了.ajax（）仅在上传完成时执行（进度条也仅在完成上传时更新）;即使我每次在eventHandler函数中调用.ajax（）函数，如上所示......

我做错了什么？我在考虑这个吗？还有什么我应该添加一个updatePanel或什么？

Answer 1

尝试一次：

$("#progressbar").progressbar({
    value: 0
});

$("#btnUpload").click(function() {
    var intervalID = setInterval(updateProgress, 250);
    $.ajax({
        type: "POST",
        url: "upload.aspx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        success: function(msg) {
            $("#progressbar").progressbar("value", 100);
            clearInterval(intervalID);
        }
    });
    return false;
});

function updateProgress() {
    var value = $("#progressbar").progressbar("option", "value");
    if (value < 100) {
        $("#progressbar").progressbar("value", value + 1);
    }
}

从c＃Asp.Net中的eventHandler调用jQuery的.ajax（）

1 个答案: