如何显示 MVC4 页面的下载进度

Question

如何在 MVC4 页面上实现下载进度条或指示文件正在下载的动画 gif。下载进度条动画应该从点击“下载”按钮开始。如何识别何时下载完成以隐藏动画。

我正在考虑显示和隐藏下面的 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

Answer 1

您可以在 ajax 调用中使用beforeSend 来开始您的动画，并使用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
            }
        });    
});