先上代码,后面再进行说明。

以下是前端代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () { $("#btnDownLoad").on("click", function () {
var $loading = $("#loadingbox");
var downId = new Date().getTime() + "-" + Math.random();
$loading.css("display", "block");
DownLoad($("#downfile").val(), downId);
var tid=setInterval(function () {
$.post("WebForm2.aspx", { getresult: "Y", downid: downId }, function (result) {
//document.writeln("result:" + result);
if(result=="Y")
{
clearInterval(tid);
$loading.css("display", "none");
alert("下载完成!");
}
});
}, 3000);
}); function DownLoad(filename,downid) {
var $form = $("<form target='' method='post' action='WebForm2.aspx'></form>");
$form.append("<input type='hidden' name='filename' value='" + filename + "'>");
$form.append("<input type='hidden' name='downid' value='" + downid + "'>");
$('body').append($form);
$form.submit();
} });
</script>
</head>
<body>
要下载的文件名:<input type="text" id="downfile" />
<input type="button" id="btnDownLoad" value="无刷新下载文件" />
<div id="loadingbox" style="display:none;">
正加下载中,请稍候。。。
</div>
</body>
</html>

以下是服务器端代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO; namespace WebApplication1
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.HttpMethod == "POST")
{
string getresult = Request.Form["getresult"];
string downId=Request.Form["downid"]; string cacheKey =string.Format("downloadcompleted-{0}-{1}",downId,Request.UserHostAddress); if (getresult == "Y") //判断是否为获取下载结果的请求
{
string result = (Cache[cacheKey] ?? "N").ToString(); Response.Clear();
Response.Write(result);
if(result=="Y") //如果查询到下载完成,则应清除标记下载完成的CACHE
{
Cache.Remove(cacheKey);
}
Response.End();
return;
} string fileName = Request.Form["filename"];
string localFilePath = Server.MapPath("~/" + fileName);
System.IO.FileInfo file = new System.IO.FileInfo(localFilePath);
Response.Clear();
Response.ClearHeaders();
Response.Buffer = false;
Response.AddHeader("Content-Disposition", "attachment;filename=" + file.Name);
Response.AddHeader("Content-Length", file.Length.ToString());
Response.ContentType = "application/octet-stream";
Response.WriteFile(file.FullName);
Response.Flush(); Cache.Insert(cacheKey, "Y");//输出所有文件数据后,添加CACHE,并设置downloadcompleted=Y,供页面查询结果使用
Response.End();
}
}
}
}

实现原理:前端通过动态创建FORM用来请求下载的资源,请求参数中必需包含一个downId(我这里还包含了一个要下载的文件名),这个是与服务器端的cache Key相对应的,服务器端接收到下载请求后,会获取下载的文件名及downId,然后依据downId生成一个相对应的cache Key用于标识下载结果,再依据下载文件名获取服务器的文件资源并响应输出文件流供客户端下载,输出完毕后,生成一个Cache,并标记为Y,表明已输出完毕。客户端在下载文件的同时,会每隔3秒请求服务器获取下载完成的Cache标识,若获取到其值为Y,则表明下载完成,服务器立即清除该Cache,客户端作出相应的响应(比如:关闭提示下载的对话框及弹出下载完成的对话框)

效果如下:

经过多个不同的浏览器及大文件压力测试,兼容性良好,都能正常下载并能收到下载完成提示,基于以上原理,可以实现进度条显示,实现原理简述:客户端请求服务器下载资源-->服务器响应并按字节分段依次输出,每次输出时生成CACHE,并保存输出进度,直至全部输出完毕,客户端在请求服务器下载资源的同时,也需要同时每隔几秒请求查询服务器下载进度,直至下载进度为100%停止请求。也可利用HTML5新特性WEBSOCKET技术来实现。

实现ASP.NET无刷新下载并提示下载完成的更多相关文章

  1. ajax无刷新上传和下载

    关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...

  2. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  3. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  4. Ajax+Asp.Net无刷新分页

    1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...

  5. asp.net无刷新上传(带预览)

    1.有个图片 <img id="Image1" title="用于广告栏及图文框缩略图" width="150" height=&qu ...

  6. asp.net分页asp.net无刷新分页高效率分页

    项目中经常会用到分页的功能类似的项目做过无数个了,今个把自己常用的分页代码分享一下. 首先说说服务端处理的代码: 下面代码中重点是分页的sql语句的写法,其中的参数@n是当前的页码,总的来说本服务端主 ...

  7. Asp +Js 无刷新分页

    Default.aspx代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...

  8. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...

  9. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

随机推荐

  1. windows下PHP与Apache的安装配置

    1.下载安装apache:官网 http://httpd.apache.org/download.cgi#apache24 下载httpd-2.2.25-win32-x86-no_ssl.msi并安装 ...

  2. Microsoft .NET Native Developer Preview 内部初探(1)

    Microsoft .NET Native Developer Preview 内部初探(1) MS 前段时间发布了.NET Native Developer Preview,被广大人员赋予“C++的 ...

  3. AngularJs学习的前景及优势

    一.趋势 互联网未来的发展趋势是前端后端只靠json数据来进行通信.后端只处理和发送一段json数据到前端,然后计算和模板渲染都在前端进行,而前端的改动,形成json数据然后传回到后端.未来趋势就是: ...

  4. STC12C5A60S2笔记3(I/O 端口)

    1. 基本特性 STC 单片机IO口可由软件配置成四种工作模式: 1)准双向口:标准51单片机模式,可用作输入和输出 2) 推挽输入输出:需要更大的驱动电流,当高电平时,拉电流20mA.当低电平时,灌 ...

  5. [.net 面向对象编程基础] (12) 面向对象三大特性——继承

    [.net 面向对象编程基础] (12) 面向对象三大特性——继承 上节我们说了面向对象的三大特性之一的封装,解决了将对同一对象所能操作的所有信息放在一起,实现统一对外调用,实现了同一对象的复用,降低 ...

  6. sourcesafe.light 开源项目启动

    sourcesafe.light 源于一个2D独立砖块沙盒游戏. 在这个游戏的设计中碰到了一个瓶颈:这个游戏想把玩家变成一个个neo,在矩阵世界中没有什么不可以修改. 这个游戏要跨平台,玩家的修改操作 ...

  7. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  8. Linux grep与正则表达式

    grep命令         格式:grep [-acinv] [--color=auto] '查找字符串' filename -a 将binary文件以text文件的 -c 计算找到 ‘查找字符串’ ...

  9. IOS UIView 01-View开始深入 绘制像素到屏幕上

    注:本人是翻译过来,并且加上本人的一点见解. 前言 一个像素是如何绘制到屏幕上去的?有很多种方式将一些东西映射到显示屏上,他们需要调用不同的框架.许多功能和方法的结合体.这里我们大概的看一下屏幕之后发 ...

  10. Model模型和Module模块的区别

    资料是从网上找的,具体是谁最先写的,不清楚了. Model通常是指模型.这个模型也许是你需求分析出来的, 也许是你算法做出来的. 不过最大可能是MVC的网站,或者是GUI开发模式中的M里的那个模型. ...