0

在 ( 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] 并且它也是静态的。所以我试图实现的工作流程如下： - 单击上传按钮 - 后面的代码开始执行并触发 EventHandler - EventHandler 调用 .ajax() 函数 - .ajax() 函数检索正在流式传输的字节并更新进度条。

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

我究竟做错了什么？我这样想对吗？还有什么我应该添加的东西，也许是一个 updatePanel 什么的？

4

1 回答 1

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);
    }
}​
于 2012-12-09T18:28:17.283 回答