Jquery 不使用Zip文件下载多个文件

我有一个通用处理程序

Document.ashx

，它通过从查询字符串中读取信息来动态创建Word文档，如

Document.ashx？clientid=123&documentid=10

，它工作得非常好

我需要创建一个带有复选框列表的界面和一个

Download All

按钮。到目前为止，我最好的想法是使用类似这样的东西来调用处理程序

$("body").append("<iframe src='Document.ashx?clientid=123&documentid=10'></iframe>
                  <iframe src='Document.ashx?clientid=123&documentid=11'></iframe>")

$（“正文”）.append（“
")

Chrome和Firefox按预期处理此问题，尽管IE9会提示用户是否要保存第一个文件，但会忽略以下文件

如何开始从客户端下载多个文件

这适用于intranet站点，因此文件总是在~1秒钟内生成，用户一次将选择~3-5个文档。绝大多数用户都在使用IE9。我可以告诉每个人他们必须使用Firefox或Chrome，但我更愿意找到一个适用于所有现代浏览器的解决方案

---

我不想创建zip文件服务器端，因为这样一来，他们总是要先解压文件（这对某些人来说太难理解），这会减慢他们的速度。

这可能会解决您的问题，也可能不会解决，但您在这里犯了一个常见错误。iFrame不是自动关闭标记。许多浏览器无法正确解析此html。试着去做吧

$("body").append("<iframe src='Document.ashx?clientid=123&documentid=10'>If you can read this, please use a newer browser</iframe>
                  <iframe src='Document.ashx?clientid=123&documentid=11'>If you can read this, please use a newer browser</iframe>")

$（“body”）.append（“如果您可以阅读此内容，请使用更新的浏览器
如果您能阅读此内容，请使用更新的浏览器）

此外，您还需要尝试独立附加每个iframe，因为一次添加所有iframe时，浏览器可能无法正确识别这些帧：

$("body").append("<iframe src='Document.ashx?clientid=123&documentid=10'>If you can read this, please use a newer browser</iframe>");
$("body").append("<iframe src='Document.ashx?clientid=123&documentid=10'>If you can read this, please use a newer browser</iframe>");

$（“body”）.append（“如果您可以阅读此内容，请使用更新的浏览器”）；
$（“body”）.append（“如果您可以阅读此内容，请使用更新的浏览器”）；

所以这可能是过度杀伤力，但在IE9、FF7和Chrome 16中有效：

灵感来自

jQuery插件：

C#在处理程序中：

public void ProcessRequest (HttpContext context) {

    ...

    if (!string.IsNullOrEmpty(context.Request.QueryString["downloadid"])) 
          Response.Cookies[context.Request.QueryString["downloadid"]].Value = "complete";
}

Javascript/jQuery：

function downloadFile(url, downloadid) {
    //set a cookie with a unique download id
    $.cookie(downloadid, 'pending', { path: '/' });

    //create a new url
    var newurl = $.param.querystring(url, { downloadid: downloadid });

    //append an iframe with new url
    $("body").append("<iframe style='height:0;width:0;' data-downloadid='" + downloadid + "' src='" + newurl + "'></iframe>");
}

function downloadComplete(downloadid) {
    //check if download is pending
    return $.cookie(downloadid) == "complete";
}

function downloadManager(arrDownloads) {
    //loop through download items backwards
    var allComplete = false;
    for (var i = arrDownloads.length; i > 0; i--) {
        if (downloadComplete(arrDownloads[i - 1].downloadid)) {
            //download the next one if it exists
            if (i == arrDownloads.length) {
                allComplete = true;
            }
            else {
                downloadFile(arrDownloads[i].url, arrDownloads[i].downloadid);
            }
            //stop checking for completed downloads
            break;
        }
    }

    if (allComplete) {
        //remove cookies
        for (var i = arrDownloads.length; i > 0; i--) {
            $.cookie(arrDownloads[i - 1].downloadid, null, { path: '/' });
        }

        //remove iframes
        $("iframe[data-downloadid]").remove();
    }
    else {
        setTimeout("downloadManager(" + JSON.stringify(arrDownloads) + ");", 500);
    }
}

function downloadFiles(arrurls) {
    var arrDownloads = [];

    for (var i = 0; i < arrurls.length; i++) {
        var item = new Object();
        item.url = arrurls[i];
        item.downloadid = newGuid();
        arrDownloads.push(item);
    }

    //start the first download
    downloadFile(arrDownloads[0].url, arrDownloads[0].downloadid);
    //initiate the manager
    downloadManager(arrDownloads);
}

$(function () {
    var arrurls = [];
    arrurls.push("Document.ashx?clientid=123&documentid=10");
    arrurls.push("Document.ashx?clientid=123&documentid=11");
    arrurls.push("Document.ashx?clientid=123&documentid=12");
    arrurls.push("Document.ashx?clientid=123&documentid=13");
    arrurls.push("Document.ashx?clientid=123&documentid=14");
    downloadFiles(arrurls);
});

函数下载文件（url，下载ID）{
//设置具有唯一下载id的cookie
$.cookie（下载ID，'pending'，{path:'/'}）；
//创建一个新的url
var newurl=$.param.querystring（url，{downloadid:downloadid}）；
//用新的url追加一个iframe
$（“正文”）。追加（“”）；
}
函数下载完成（下载ID）{
//检查下载是否挂起
返回$.cookie（downloadid）=“完成”；
}
函数下载管理器（ARR下载）{
//向后循环下载项目
var allComplete=false；
对于（var i=0.length；i>0；i--）{
if（下载完成（arrldownloads[i-1].downloaddid））{
//下载下一个（如果存在）
if（i==arr.length）{
全部完成=正确；
}
否则{
下载文件（arrDownloads[i].url，arrDownloads[i].downloadid）；
}
//停止检查已完成的下载
打破
}
}
如果（全部完成）{
//删除cookies
对于（var i=0.length；i>0；i--）{
$.cookie（arrloads[i-1].downloadid，null，{path:'/'}）；
}
//删除iframe
$（“iframe[data downloadid]”）。remove（）；
}
否则{
setTimeout（“downloadManager”（“+JSON.stringify（arrldownloads）+”）；”，500）；
}
}
函数下载文件（ARRURL）{
var=[]；
for（var i=0；i

jQuery插件，它将为您完成以下工作：

---

我知道这是一个老问题，但我最近遇到了这个问题，并创建了最适合我需要的解决方案（我不想使用任何cookie，希望代码尽可能简单）。在代码隐藏中：

Protected Sub DownloadFile(fileId As String)
    If Request.Browser.Browser = "Chrome" Then
        'open iframes dynamically for multiple downloads
        ClientScript.RegisterStartupScript(Me.GetType(), fileId, _
                                           "<script language='javascript'>createIframeForDownloadHandler('" & fileId & "');</script>")
    Else
        'open windows for multiple downloads
        ClientScript.RegisterStartupScript(Me.GetType(), fileId, _
                                           "<script language='javascript'>openWindowForDownloadHandler('" & fileId & "');</script>")
    End If
End Sub

将DownloadFile（id）放入循环中效果很好

---

基本上，我发现chrome可以很好地处理iFrame，但IE不行（我使用的是IE9）。这在Crome v26、FF v19、IE9上对我起到了作用。

您可以在javascript循环中调用下载，如下所示：

<a id="downloadAll" href="#">Download All</a>

<script>
var downloadSelected = $('a#downloadSelected');
var doc_ids = ['10', '11'];
for (var i in doc_ids) {
    var uri = 'Document.ashx?clientid=123&documentid=' + doc_ids[i];
    var iframe = $("<iframe/>").attr({
                     src: uri,
                     style: "visibility:hidden;display:none"
                 }).appendTo(downloadAll);
}
</script>

var downloadSelected=$（'a#downloadSelected'）；
var doc_id=['10'，'11']；
用于（文档ID中的变量i）{
var uri='Document.ashx？clientid=123&documentid='+doc_id[i]；
变量iframe=$（“”）。attr({
src:uri，
样式：“可见性：隐藏；显示：无”
}).appendTo（下载全部）；
}

使用2

$.append（）

语句效果更好（Chrome没有发出下载多个文件的警告），但在IE9中仍然不起作用（它只识别第一个文件）。我将尝试类似Chrome的东西，它仍然会给你一个黄色的条“此网站正在尝试下载多个文件。你想允许这样吗？“下载第一个文件后。好。。您正在尝试下载多个文件。黄色条是正确的。如果你想避免它，你可以在下载之间增加更多的延迟。查看“延迟”选项。我在您的github测试中使用了图像而不是tar.zip，但在chrome最新版本上不起作用。这取决于第一次呼叫的成功。如果失败了怎么办？它将如何继续并调用downloadFile进行下一步？

<a id="downloadAll" href="#">Download All</a>

<script>
var downloadSelected = $('a#downloadSelected');
var doc_ids = ['10', '11'];
for (var i in doc_ids) {
    var uri = 'Document.ashx?clientid=123&documentid=' + doc_ids[i];
    var iframe = $("<iframe/>").attr({
                     src: uri,
                     style: "visibility:hidden;display:none"
                 }).appendTo(downloadAll);
}
</script>