Javascript 上传文件时，如何运行jquery函数来更新进度条？

您好，我正在尝试实现一些代码。我想将它与来自的文件上载脚本集成。我让它单独工作，但不是一起工作

如果我将jquery封装在

$(document).ready(function(){
...
});

jquery运行、轮询报告上载状态的脚本，并按预期写入控制台。如果我使用

$(document).ready(function(){
    $("#addForm").submit(function() {
    ...
    });
});

文件将上载，但jquery不会轮询脚本并将数据写入控制台

我对jquery相当陌生。我这里出了什么问题？谢谢

html

材料：

jquery

<script type="text/javascript">
    $(document).ready(function(){
        //$("#addForm").submit(function() {
        var request;
        var thispid = "<%=mypid%>";
        console.log(thispid);
        var progresspump = setInterval(function(){
        /* query the completion percentage from the server */
        request = $.ajax({
            type: "GET",
            url: "progress_ajax_update.asp?pid=<%=mypid%>",
            dataType: "xml"
        });
        // callback handler that will be called on success
        request.done(function (xml){
        $(xml).find('Progress').each(function(){
            var elap = $(this).find('ElapsedTime').text();
            var rem = $(this).find('RemainingTime').text();
            var perc = $(this).find('PercentComplete').text();
            var tot = $(this).find('TotalBytes').text();
            var upl = $(this).find('UploadedBytes').text();
            var rem = $(this).find('RemainingBytes').text();
            var spd = $(this).find('TransferSpeed').text();
            // log a message to the console
            console.log(elap);
            console.log(perc);
            console.log("progress_ajax_update.asp?pid=<%=mypid%>")
            /* update the progress bar width */
            $("#progress").css('width',perc+'%');
            /* and display the numeric value */
            $("#progress").html(perc+'%');
            /* test to see if the job has completed */
            if(test > 99.999) {
                clearInterval(progresspump);
                $("#progressouter").removeClass("active");
                $("#progressouter").removeClass("progress-striped");
                $("#progress").html("Done");
             }
          });
      });
    }, 2000);
  //});
});
</script>

$（文档）.ready（函数（）{
//$（“#addForm”）.submit（函数（）{
var请求；
var thispid=“”；
console.log（thispid）；
var progresspump=setInterval（函数（）{
/*从服务器查询完成百分比*/
请求=$.ajax({
键入：“获取”，
url:“progress\u ajax\u update.asp？pid=“，
数据类型：“xml”
});
//成功时将调用的回调处理程序
完成（函数（xml）{
$（xml）.find（'Progress'）.each（function（）{
var elap=$（this.find（'ElapsedTime'）.text（）；
var rem=$（this.find（'RemainingTime'）.text（）；
var perc=$（this.find（'PercentComplete'）.text（）；
var tot=$（this.find（'TotalBytes'）.text（）；
var upl=$（this）.find（'UploadedBytes'）.text（）；
var rem=$（this.find（'RemainingBytes'）.text（）；
var spd=$（this.find（'TransferSpeed'）.text（）；
//将消息记录到控制台
控制台日志（elap）；
控制台日志（perc）；
log（“progress\u ajax\u update.asp？pid=“）
/*更新进度条宽度*/
$（“#进度”）.css（'width'，perc+'%'）；
/*并显示数值*/
$（“#进度”）.html（perc+'%'）；
/*测试作业是否已完成*/
如果（测试>99.999）{
净距（泵）；
$（“#progressouter”）.removeClass（“活动”）；
$（“#progressouter”）.removeClass（“进度条带化”）；
$（“#进度”）.html（“完成”）；
}
});
});
}, 2000);
//});
});

您会得到这种行为，因为当您提交表单（通过单击提交按钮）时，您实际上会重新加载页面，甚至将表单提交指向另一个脚本，这两种情况下都会停止javascript解释。因此，为了实现您想要的，您需要防止在您需要的时间点之前提交表单。请尝试在

中使用。提交（事件）

：

或者我猜是最新的色度（甚至可能两者兼而有之）

然后，您可以检查上传进度并使用javascript执行某些操作，或者当您对上传感到满意时，只需使用javascript提交表单：

$('#form-id').submit()

---

但在后一种情况下，不要忘记首先在submit按钮上使用

.on（'click'）

处理程序来执行您需要的操作，因为

$（form）.submit（）

只需再次调用您的

submit（）

函数，该函数不会返回

true

，并继续该事件。

我已经在下面的回答中为您提供了线索。试试看，让我知道。

return false;

event.returnValue=false;

$('#form-id').submit()