使用处理程序下载文件时显示百分比的进度条

时间:2015-03-30 11:44:33

标签: jquery asp.net ajax browser progress-bar

我想在按钮上单击下载.EXE文件并在网页上显示下载进度条而不是浏览器进度条。这个开发背后的想法是浏览器在他的下载管理器中隐藏了它的下载进度条。

  

我希望在下载到达后自动运行此.EXE   100%。

我试图开发一些代码,如下所示。它只是在浏览器控制台中看到时下载文件,但无法显示进度条和百分比。

HTML标记:

<div>
    <input type="button" value="Download" onclick="downfile();" />
</div>
<div id="progressCounter"></div>

JavaScript逻辑:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    function downfile() {
        var myTrigger;
        var progressElem = $('#progressCounter');
        $.ajax({
            type: 'POST',
            url: 'Download.ashx',
            beforeSend: function (thisXHR) {
                myTrigger = setInterval(function () {
                    if (thisXHR.readyState > 2) {
                        var totalBytes = thisXHR.getResponseHeader('Content-length');
                        var dlBytes = thisXHR.responseText.length;
                        (totalBytes > 0) ? progressElem.html(Math.round((dlBytes / totalBytes) * 100) + "%") : progressElem.html(Math.round(dlBytes / 1024) + "K");
                    }
                }, 200);
            },
            complete: function () {
                clearInterval(myTrigger);
            },
            success: function (response) {
                alert('done');
            }
        });
    }
</script>

Download.ashx

public void ProcessRequest (HttpContext context) {
    string filename = "ccsetup403.exe";
    string path = HttpContext.Current.Server.MapPath("~/" +filename);
    context.Response.ContentType = "application/octet-stream";
        context.Response.AddHeader("content-disposition", "attachment;  filename=" + filename);

        FileStream fs = new FileStream(path, FileMode.Open);
        BinaryReader br = new BinaryReader(fs);
        byte[] bin = br.ReadBytes(Convert.ToInt32(fs.Length));
        context.Response.BinaryWrite(bin);
        context.Response.End();
        fs.Close();
  }

欢迎其他想法。

如果您有任何疑问,请与我们联系。

0 个答案:

没有答案