Question

您好，我正在尝试实现我在http://elfga.com/获得的一些代码。我想将它与AspUpload的文件上传脚本集成。我让它分开工作但不在一起。

如果我将jquery包装在

中

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

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

将其绑定到表单提交

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

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

我对jquery很新。这里有什么问题？感谢

HTML

<form name="addForm" id="addForm" method="post" enctype="multipart/form-data" action="moduleMaterialUpd.asp?PID=368337C0351A5DE6" onSubmit="getProgress()">
<fieldset>
<div>
<label for="title">Material: </label>
<input name="filename" type="file" required/>
</div>
<div>
<input class="button big primary" name="button" type="submit" value="Add Material"/>
<a class="button big primary" href="module.asp?id=456283123">Done</a>
</div>
</fieldset>
</form>

<div class="progress progress-striped active" id="progressouter" style="width:500px; margin:10px auto;">
<div class="bar" id="progress"></div>
</div>

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>

Answer 1

您会收到此行为，因为当您提交表单（通过单击提交按钮）时，您实际上会重新加载页面，甚至将表单提交指向另一个脚本，这两个脚本都会停止javascript解释。因此，为了达到您的目的，您需要在需要之前阻止提交表单。只需尝试使用.submit(event)：

return false;

或者我认为最新的Chromes（甚至可能两者兼而有之）

event.returnValue=false;

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

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

但在后一种情况下，请不要忘记首先在提交按钮上使用.on('click')处理程序来执行您需要的操作，因为$(form).submit()只会再次调用您的submit()函数，而不是t返回true并继续活动。

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

1 个答案: