如何在单击按钮时让用户下载多个文件？

Question

所以我有一个httpd服务器运行,它有一堆文件的链接.假设用户从文件列表中选择三个文件进行下载,它们位于:

mysite.com/file1 
mysite.com/file2
mysite.com/file3

当他们点击下载按钮时,我希望他们从上面的链接下载这三个文件.

我的下载按钮看起来像:

var downloadButton = new Ext.Button({
  text: "Download",
  handler: function(){
    //download the three files here
  }
});

Answer 1

最好的方法是将文件压缩并链接到:

可以在此处找到另一个解决方案:如何在单击时使链接打开多个页面

其中陈述如下:

HTML:

<a href="#" class="yourlink">Download</a>

JS:

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('mysite.com/file1');
    window.open('mysite.com/file2');
    window.open('mysite.com/file3');
});

说完这个之后,我仍然会使用压缩文件,因为这个实现需要JavaScript,有时也可能被阻止为弹出窗口.

Answer 2

这种方法对我来说效果最好,并没有打开新标签,只是下载了我需要的文件/图像:

var filesForDownload = [];
filesForDownload( { path: "/path/file1.txt", name: "file1.txt" } );
filesForDownload( { path: "/path/file2.jpg", name: "file2.jpg" } );
filesForDownload( { path: "/path/file3.png", name: "file3.png" } );
filesForDownload( { path: "/path/file4.txt", name: "file4.txt" } );

$jq('input.downloadAll').click( function( e )
{
    e.preventDefault();

    var temporaryDownloadLink = document.createElement("a");
    temporaryDownloadLink.style.display = 'none';

    document.body.appendChild( temporaryDownloadLink );

    for( var n = 0; n < filesForDownload.length; n++ )
    {
        var download = filesForDownload[n];
        temporaryDownloadLink.setAttribute( 'href', download.path );
        temporaryDownloadLink.setAttribute( 'download', download.name );

        temporaryDownloadLink.click();
    }

    document.body.removeChild( temporaryDownloadLink );
} );

Answer 3

我喜欢click()在多个文件下载中的a元素上执行事件for loop仅适用于有限数量的文件（在我的情况下为 10 个文件）。可以解释这种对我来说有意义的行为的唯一原因是click()事件执行的下载速度/间隔。

我发现，如果我减慢click()事件的执行速度，那么我将能够下载所有文件。

这是对我有用的解决方案。

var urls = [
  'http://example.com/file1',
  'http://example.com/file2',
  'http://example.com/file3'
]

var interval = setInterval(download, 300, urls);

function download(urls) {
  var url = urls.pop();

  var a = document.createElement("a");
  a.setAttribute('href', url);
  a.setAttribute('download', '');
  a.setAttribute('target', '_blank');
  a.click();

  if (urls.length == 0) {
    clearInterval(interval);
  }
}

我click()每 300 毫秒执行一次下载事件。当没有更多的要下载的文件urls.length == 0，然后，我执行clearInterval的interval功能停止下载。

Answer 4

您可以：

1. 压缩选定的文件并返回一个压缩文件。
2. 打开多个弹出窗口，每个弹出窗口都提示下载。

注意：选项一客观上更好。

选项三：通过一次操作下载多个文件