先給大家貼代碼了，后面給大家在做具體的文字說明。
以下是前端代碼：
<%@ 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;"> 正加下載中，請(qǐng)稍候。。。 </div></body></html>
以下是服務(wù)器端代碼：
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") //判斷是否為獲取下載結(jié)果的請(qǐng)求 { string result = (Cache[cacheKey] ?? "N").ToString(); Response.Clear(); Response.Write(result); if(result=="Y") //如果查詢到下載完成，則應(yīng)清除標(biāo)記下載完成的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");//輸出所有文件數(shù)據(jù)后，添加CACHE，并設(shè)置downloadcompleted=Y，供頁面查詢結(jié)果使用 Response.End(); } } }}實(shí)現(xiàn)原理：前端通過動(dòng)態(tài)創(chuàng)建FORM用來請(qǐng)求下載的資源，請(qǐng)求參數(shù)中必需包含一個(gè)downId（我這里還包含了一個(gè)要下載的文件名），這個(gè)是與服務(wù)器端的cache Key相對(duì)應(yīng)的，服務(wù)器端接收到下載請(qǐng)求后，會(huì)獲取下載的文件名及downId,然后依據(jù)downId生成一個(gè)相對(duì)應(yīng)的cache Key用于標(biāo)識(shí)下載結(jié)果，再依據(jù)下載文件名獲取服務(wù)器的文件資源并響應(yīng)輸出文件流供客戶端下載，輸出完畢后，生成一個(gè)Cache，并標(biāo)記為Y，表明已輸出完畢。客戶端在下載文件的同時(shí)，會(huì)每隔3秒請(qǐng)求服務(wù)器獲取下載完成的Cache標(biāo)識(shí)，若獲取到其值為Y，則表明下載完成，服務(wù)器立即清除該Cache，客戶端作出相應(yīng)的響應(yīng)（比如：關(guān)閉提示下載的對(duì)話框及彈出下載完成的對(duì)話框）
效果如下：
經(jīng)過多個(gè)不同的瀏覽器及大文件壓力測(cè)試，兼容性良好，都能正常下載并能收到下載完成提示，基于以上原理，可以實(shí)現(xiàn)進(jìn)度條顯示，實(shí)現(xiàn)原理簡(jiǎn)述：客戶端請(qǐng)求服務(wù)器下載資源-->服務(wù)器響應(yīng)并按字節(jié)分段依次輸出，每次輸出時(shí)生成CACHE，并保存輸出進(jìn)度，直至全部輸出完畢，客戶端在請(qǐng)求服務(wù)器下載資源的同時(shí)，也需要同時(shí)每隔幾秒請(qǐng)求查詢服務(wù)器下載進(jìn)度，直至下載進(jìn)度為100%停止請(qǐng)求。也可利用HTML5新特性WEBSOCKET技術(shù)來實(shí)現(xiàn)。
新聞熱點(diǎn)
疑難解答
圖片精選
