2013-09-27 43 views
1

如何實現下載進度條或指示在MVC4頁面上進行文件下載的動畫gif。下載進度條動畫應該從點擊「下載」按鈕開始。如何確定下載何時完成以隱藏動畫。如何顯示MVC4頁面的下載進度頁面

我想到的顯示和隱藏在下面的div來顯示進度

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; 
    top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; 
    opacity: .8; filter: alpha(opacity=70);display:none" > 
    <p style="position: absolute; top: 30%; left: 45%; color: White;"> 
     Downloading, please wait...<img src="../../../../Content/images/ajax-dowloading.gif" /> 
    </p> 

</div> 

像下面

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btnDownload").click(function (e) { 


     } 
}); 

還有的用戶在下載操作過程中取消了下載可能性進展。如何檢測如果用戶取消下載。如果用戶已經取消了下載,我想隱藏在div

+0

文件下載或上傳? –

回答

1

您可以使用beforeSend在Ajax調用來開始你的動畫和success隱藏動畫如下:

$("#buttonId").click(function() {  
     $.ajax({ 
      type: "POST", //Your type 
      url: "someURL" // Your URL 
      data: //Your Data, 
      beforeSend: function(msg){ 
       // Show animation code here 
      }, 
      success: function(msg){ 
        // hide animation code here 
      } 
     });  
}); 
+0

這是有效的,但是在下載被取消的情況下,這將繼續顯示動畫。如何識別用戶是否取消下載,那麼我需要隱藏動畫div,以便用戶可以重新開始下載,如果他想要 – Millar

+0

即使下載完成,它沒有進入'成功'部分,動畫顯示即使在下載完成後也是如此。 – Millar

+0

你試過把調試器放在成功的部分嗎? –