Question

如何实施下载进度条或动画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

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
            }
        });    
});

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

1 个答案: