Question

我有一個通用處理程序Document.ashx，通過從查詢字符串中讀取信息，像這樣Document.ashx?clientid=123&documentid=10，它可以很好地創建Word文檔。

我需要創建一個界面，其中包含複選框和一個Download All按鈕。到目前爲止，最好的想法是使用類似這樣的方式來調用處理程序。

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

Chrome和Firefox處理這種預期，雖然IE9提示用戶，詢問他們是否希望保存的第一個文件，而忽略了下列文件。

如何開始從客戶端下載多個文件？

這是一個內部網站，所以文件總是在1秒內生成，用戶一次會選擇3-5個文件。絕大多數用戶正在使用IE9。我可以告訴大家他們必須使用Firefox或Chrome，但我寧願找到適用於所有現代瀏覽器的解決方案。

我不想創建一個zip文件服務器端，因爲這樣他們總是必須先解壓縮它（這對於一些人來說太難理解了），並且會減慢它們的速度。

Answer 1

所以這是propably矯枉過正，但工作在IE9，FF7和Chrome 16：

通過this SO post

jQuery插件的啓發：

• json2.js
• $.cookie()
• $.bbq()

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

Answer 2

這可能會也可能不會解決您的問題，但您在此處發生常見錯誤。 Iframes不是自閉標籤。許多瀏覽器都不會正確解析這個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>") 

而且，你這樣想嘗試獨立追加每個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>"); 

Answer 3

的jQuery插件，它會做的工作適合你：

github.com/biesiad/multiDownload

Answer 4

我知道這是一個老問題，但最近我有過這樣的問題，並創造了這個解決方案最適合我的需要（我不想使用任何cookies並希望代碼儘可能簡單）。在後面的代碼：

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 

這裏是JavaScript函數：

function openWindowForDownloadHandler(fileId) { 
    //open a new window. setting height and width foces new window as opposed to new tab 
    window.open('FileShareDownloadHandler.ashx?id=' + fileId, '_blank', 'width=100,height=100,left=0,top=0'); 
} 

function createIframeForDownloadHandler(fileId) { 
    var element = document.createElement("iframe"); 
    element.setAttribute('id', 'myframe' + fileId); 
    element.setAttribute('style', 'display:none;'); 
    element.setAttribute('src', 'FileShareDownloadHandler.ashx?id=' + fileId); 
    document.body.appendChild(element); 
} 

把DownloadFile（ID）內的循環效果很好。

基本上，我發現鉻適用於處理iFrames，但IE瀏覽器不（我使用IE9）。這在Crome v26，FF v19，IE9上爲我工作。

Answer 5

你可以調用一個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>