http使用单个操作下载多个文件

3 日，6 小时 Questions & Answers 246294

我不确定使用标准的web技术是否可以做到这一点

我希望用户能够在一次操作中下载多个文件。也就是说，单击文件旁边的复选框，然后获取所有选中的文件

有可能吗？如果有，你推荐什么基本策略。我知道我可以使用comets技术创建触发HttpResponse的服务器端事件，但我希望有一种更简单的方法

Tags:

共 (6) 个答案

# 1 楼答案

您可以创建一组临时隐藏的iFrame，在其中通过GET或POST启动下载，等待下载启动并删除iFrame：

<!DOCTYPE HTML>
<html>
<body>
  <button id="download">Download</button> 

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">

     $('#download').click(function() {
       download('http://nogin.info/cv.doc','http://nogin.info/cv.doc');
     });

     var download = function() {
       for(var i=0; i<arguments.length; i++) {
         var iframe = $('<iframe style="visibility: collapse;"></iframe>');
         $('body').append(iframe);
         var content = iframe[0].contentDocument;
         var form = '<form action="' + arguments[i] + '" method="GET"></form>';
         content.write(form);
         $('form', content).submit();
         setTimeout((function(iframe) {
           return function() { 
             iframe.remove(); 
           }
         })(iframe), 2000);
       }
     }      

  </script>
</body>
</html>

或者，如果没有jQuery：

 function download(...urls) {
    urls.forEach(url => {
      let iframe = document.createElement('iframe');
      iframe.style.visibility = 'collapse';
      document.body.append(iframe);

      iframe.contentDocument.write(
        `<form action="${url.replace(/\"/g, '"')}" method="GET"></form>`
      );
      iframe.contentDocument.forms[0].submit();

      setTimeout(() => iframe.remove(), 2000);
    });
  }

# 2 楼答案

此解决方案可以跨浏览器工作，并且不会触发警告。这里我们不是创建一个iframe，而是为每个文件创建一个链接。这样可以防止弹出警告消息

为了处理循环部分，我们使用setTimeout，这是它在IE中工作所必需的

更新2021：我知道“运行代码片段”不再有效，但这是由于跨站点cookie问题。如果将代码部署在您自己的站点上，则该代码可以正常工作

&13；第13部分,；

/**
 * Download a list of files.
 * @author speedplane
 */
function download_files(files) {
  function download_next(i) {
    if (i >= files.length) {
      return;
    }
    var a = document.createElement('a');
    a.href = files[i].download;
    a.target = '_parent';
    // Use a.download if available, it prevents plugins from opening.
    if ('download' in a) {
      a.download = files[i].filename;
    }
    // Add a to the doc for click to work.
    (document.body || document.documentElement).appendChild(a);
    if (a.click) {
      a.click(); // The click method is supported by most browsers.
    } else {
      $(a).click(); // Backup using jquery
    }
    // Delete the temporary link.
    a.parentNode.removeChild(a);
    // Download the next file with a small timeout. The timeout is necessary
    // for IE, which will otherwise only download the first file.
    setTimeout(function() {
      download_next(i + 1);
    }, 500);
  }
  // Initiate the first download.
  download_next(0);
}

；

<script>
  // Here's a live example that downloads three test text files:
  function do_dl() {
    download_files([
      { download: "https://stackoverflow.com/robots.txt", filename: "robots.txt" },
      { download: "https://www.w3.org/TR/PNG/iso_8859-1.txt", filename: "standards.txt" },
      { download: "http://qiime.org/_static/Examples/File_Formats/Example_Mapping_File.txt", filename: "example.txt" },
    ]);
  };
</script>
<button onclick="do_dl();">Test downloading 3 text files.</button>

；

和#13；

# 3 楼答案

最简单的方法是将多个文件捆绑到一个ZIP文件中

我想您可以使用一堆iFrame或弹出窗口启动多个文件下载，但从可用性的角度来看，ZIP文件更好。谁想点击浏览器将弹出的十个“另存为”对话框

# 4 楼答案

HTTP不支持一次下载多个文件

有两种解决方案：

打开x个窗口以启动文件下载（这将通过JavaScript完成）
首选解决方案创建一个脚本来压缩文件

# 5 楼答案

iframe答案的jQuery版本：

function download(files) {
    $.each(files, function(key, value) {
        $('<iframe></iframe>')
            .hide()
            .attr('src', value)
            .appendTo($('body'))
            .load(function() {
                var that = this;
                setTimeout(function() {
                    $(that).remove();
                }, 100);
            });
    });
}

# 6 楼答案