當文件上傳時，如何運行jquery函數來更新進度條？

你好，我想實現一些我在http://elfga.com/得到的代碼。我想將它與AspUpload的文件上傳腳本集成在一起。我分開工作，但不在一起。當文件上傳時，如何運行jquery函數來更新進度條？

如果我換了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>

來源

2014-02-07 slamslam102

我在下面的答案中給出了你的線索。試試看，讓我知道。 –

你遇到這個問題，因爲當你提交表單（通過點擊提交按鈕），你實際上是重新載入頁面，甚至直接將表單提交到另一個腳本在兩種情況下停止javascript解釋。所以要達到你想要的，你需要在你需要的點之前阻止提交表單。剛剛嘗試在你的.submit(event)使用方法：

return false;

或者我猜最新的鉻合金（甚至結合兩種）

event.returnValue=false;

然後，您可以查看上傳進度，做一些JavaScript或當你很高興與上傳，然後只提交表單在javascript：

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

但在後一種情況下，不要忘記先用.on('click')處理程序上的提交按鈕做你所需要的，因爲$(form).submit()只會再次調用你的submit()函數，哪些不會返回true並繼續這個事件。

來源

2014-02-07 03:17:18

當文件上傳時，如何運行jquery函數來更新進度條？

回答

相關問題