blocks|key|1103716|text|最简单的方法是将多个文件捆绑到一个ZIP文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1103717|我想您可以使用一堆iframe或弹出窗口启动多个文件下载，但从可用性的角度来看，ZIP文件仍然更好。谁想点击浏览器弹出的十个“另存为”对话框？|1103718|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Easiest way would be to serve the multiple files bundled up into a ZIP file.</p>

<p>I suppose you could initiate multiple file downloads using a bunch of iframes or popups, but from a usability standpoint, a ZIP file is still better. Who wants to click through ten "Save As" dialogs that the browser will bring up?</p>


blocks|key|1318706|text|您可以创建一组临时的隐藏iframe，通过GET或POST在其中启动下载，等待下载启动并删除iframe：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1318707|<!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%2B%2B)+{
+++++++++var+iframe+=+$('<iframe+style="visibility:+collapse;"></iframe>');
+++++++++$('body').append(iframe);
+++++++++var+content+=+iframe[0].contentDocument;
+++++++++var+form+=+'<form+action="'+%2B+arguments[i]+%2B+'"+method="GET"></form>';
+++++++++content.write(form);
+++++++++$('form',+content).submit();
+++++++++setTimeout((function(iframe)+{
+++++++++++return+function()+{+
+++++++++++++iframe.remove();+
+++++++++++}
+++++++++})(iframe),+2000);
+++++++}
+++++}++++++

++</script>
</body>
</html>|code-block|syntax|javascript|1318708|或者，如果没有jQuery：|1318709|+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);
++++});
++}|1318710|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can create a temporary set of hidden iframes, initiate download by GET or POST inside of them, wait for downloads to start and remove iframes:</p>

<pre class="lang-xml prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button id="download"&gt;Download&lt;/button&gt; 

  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;

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

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

  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Or, without jQuery:</p>

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

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

      setTimeout(() =&gt; iframe.remove(), 2000);
    });
  }
</code></pre>


blocks|key|1318769|text|我同意zip文件是一种更简洁的解决方案。但是，如果您必须推送多个文件，这是我想出的解决方案。它可以在IE9和更高版本(也可能是更低的版本--我还没有测试过)、Firefox、Safari和Chrome上运行。当你的网站第一次使用Chrome时，Chrome会向用户显示一条消息，要求用户同意下载多个文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1318770|function+deleteIframe+(iframe)+{
++++iframe.remove();+
}
function+createIFrame+(fileURL)+{
++++var+iframe+=+$('<iframe+style="display:none"></iframe>');
++++iframe[0].src=+fileURL;
++++$('body').append(iframe);
++++timeout(deleteIframe,+60000,+iframe);+++++++++++++
+}
+//+This+function+allows+to+pass+parameters+to+the+function+in+a+timeout+that+are+
+//+frozen+and+that+works+in+IE9
+function+timeout(func,+time)+{
++++++var+args+=+[];
++++++if+(arguments.length+>2)+{
+++++++++++args+=+Array.prototype.slice.call(arguments,+2);
++++++}
++++++return+setTimeout(function(){+return+func.apply(null,+args);+},+time);
+}
+//+IE+will+process+only+the+first+one+if+we+put+no+delay
+var+wait+=+(isIE+?+1000+:+0);
+for+(var+i+=+0;+i+<+files.length;+i%2B%2B)+{++
++++++timeout(createIFrame,+wait*i,+files[i]);
+}|code-block|syntax|javascript|1318771|这种技术唯一的副作用是，用户将看到提交和显示下载对话框之间的延迟。为了最小化这种影响，我建议您使用描述cookie和在这个问题上使用Detect+when+browser+receives+file+download的技术，该技术包括为您的文件设置cookie，以知道它已经开始下载。您必须在客户端检查此cookie，并将其发送到服务器端。不要忘记为您的cookie设置正确的路径，否则您可能看不到它。您还必须调整该解决方案以适应多个文件的下载。|offset|length|1318772|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download^0|0|0|1U|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I agree that a zip file is a neater solution... But if you have to push multiple file, here's the solution I came up with. It works in IE 9 and up (possibly lower version too - I haven't tested it), Firefox, Safari and Chrome. Chrome will display a message to user to obtain his agreement to download multiple files the first time your site use it.</p>



<pre><code>function deleteIframe (iframe) {
    iframe.remove(); 
}
function createIFrame (fileURL) {
    var iframe = $('&lt;iframe style="display:none"&gt;&lt;/iframe&gt;');
    iframe[0].src= fileURL;
    $('body').append(iframe);
    timeout(deleteIframe, 60000, iframe);             
 }
 // This function allows to pass parameters to the function in a timeout that are 
 // frozen and that works in IE9
 function timeout(func, time) {
      var args = [];
      if (arguments.length &gt;2) {
           args = Array.prototype.slice.call(arguments, 2);
      }
      return setTimeout(function(){ return func.apply(null, args); }, time);
 }
 // IE will process only the first one if we put no delay
 var wait = (isIE ? 1000 : 0);
 for (var i = 0; i &lt; files.length; i++) {  
      timeout(createIFrame, wait*i, files[i]);
 }
</code></pre>

<p>The only side effect of this technique, is that user will see a delay between submit and the download dialog showing. To minimize this effect, I suggest you use the technique describe <a href="http://geekswithblogs.net/GruffCode/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx" rel="nofollow noreferrer">here</a> and on this question <a href="https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download">Detect when browser receives file download</a> that consist of setting a cookie with your file to know it has started download. You will have to check for this cookie on client side and to send it on server side. Don't forget to set the proper path for your cookie or you might not see it. You will also have to adapt the solution for multiple file download.</p>


blocks|key|1103855|text|为了改进@Dmitry+Nogin的回答:这在我的案例中起作用了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1103856|然而，它没有经过测试，因为我不确定文件对话在各种操作系统/浏览器组合上是如何工作的。(因此，社区维基。)|1103857|<script>
$('#download').click(function+()+{
++++download(['http://www.arcelormittal.com/ostrava/doc/cv.doc',+
++++++++++++++'http://www.arcelormittal.com/ostrava/doc/cv.doc']);
});

var+download+=+function+(ar)+{
++++var+prevfun=function(){};
++++ar.forEach(function(address)+{++
++++++++var+pp=prevfun;
++++++++var+fun=function()+{
++++++++++++++++var+iframe+=+$('<iframe+style="visibility:+collapse;"></iframe>');
++++++++++++++++$('body').append(iframe);
++++++++++++++++var+content+=+iframe[0].contentDocument;
++++++++++++++++var+form+=+'<form+action="'+%2B+address+%2B+'"+method="POST"></form>';
++++++++++++++++content.write(form);
++++++++++++++++$(form).submit();
++++++++++++++++setTimeout(function()+{++++
++++++++++++++++++++$(document).one('mousemove',+function()+{+//<--slightly+hacky!
++++++++++++++++++++++++iframe.remove();
++++++++++++++++++++++++pp();
++++++++++++++++++++});
++++++++++++++++},2000);
++++++++}
++++++++prevfun=fun;+
++++++});
++++++prevfun();+++
}
</script>|code-block|syntax|javascript|1103858|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>To improve on @Dmitry Nogin's answer: this worked in my case. </p>

<p>However, it's not tested, since I am not sure how the file dialogue works on various OS/browser combinations. (Thus community wiki.)</p>

<pre class="lang-xml prettyprint-override"><code>&lt;script&gt;
$('#download').click(function () {
    download(['http://www.arcelormittal.com/ostrava/doc/cv.doc', 
              'http://www.arcelormittal.com/ostrava/doc/cv.doc']);
});

var download = function (ar) {
    var prevfun=function(){};
    ar.forEach(function(address) {  
        var pp=prevfun;
        var fun=function() {
                var iframe = $('&lt;iframe style="visibility: collapse;"&gt;&lt;/iframe&gt;');
                $('body').append(iframe);
                var content = iframe[0].contentDocument;
                var form = '&lt;form action="' + address + '" method="POST"&gt;&lt;/form&gt;';
                content.write(form);
                $(form).submit();
                setTimeout(function() {    
                    $(document).one('mousemove', function() { //&lt;--slightly hacky!
                        iframe.remove();
                        pp();
                    });
                },2000);
        }
        prevfun=fun; 
      });
      prevfun();   
}
&lt;/script&gt;
</code></pre>


blocks|key|1103886|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1103887|var+links+=+[
++'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',
++'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',
++'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'
];

function+downloadAll(urls)+{
++var+link+=+document.createElement('a');

++link.setAttribute('download',+null);
++link.style.display+=+'none';

++document.body.appendChild(link);

++for+(var+i+=+0;+i+<+urls.length;+i%2B%2B)+{
++++link.setAttribute('href',+urls[i]);
++++link.click();
++}

++document.body.removeChild(link);
}|code-block|syntax|javascript|1103888|<button+onclick="downloadAll(window.links)">Test+me!</button>|1103889|1103890|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var links = [
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',
  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'
];

function downloadAll(urls) {
  var link = document.createElement('a');

  link.setAttribute('download', null);
  link.style.display = 'none';

  document.body.appendChild(link);

  for (var i = 0; i &lt; urls.length; i++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }

  document.body.removeChild(link);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="downloadAll(window.links)"&gt;Test me!&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1103934|text|iframe的jQuery版本回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1103935|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);
++++++++++++});
++++});
}|code-block|syntax|javascript|1103936|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A jQuery version of the iframe answers:</p>

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


blocks|key|1318917|text|+++++++++++<p+class="style1">



<a+onclick="downloadAll(window.links)">Balance+Sheet+Year+2014-2015</a>

</p>

<script>
+var+links+=+[
++'pdfs/IMG.pdf',
++'pdfs/IMG_0001.pdf',
+'pdfs/IMG_0002.pdf',
+'pdfs/IMG_0003.pdf',
'pdfs/IMG_0004.pdf',
'pdfs/IMG_0005.pdf',
+'pdfs/IMG_0006.pdf'

];

function+downloadAll(urls)+{
++var+link+=+document.createElement('a');

++link.setAttribute('download','Balance+Sheet+Year+2014-2015');
++link.style.display+=+'none';

++document.body.appendChild(link);

++for+(var+i+=+0;+i+<+urls.length;+i%2B%2B)+{
++++link.setAttribute('href',+urls[i]);
++++link.click();
++}

++document.body.removeChild(link);
}
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1318918|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>           &lt;p class="style1"&gt;



&lt;a onclick="downloadAll(window.links)"&gt;Balance Sheet Year 2014-2015&lt;/a&gt;

&lt;/p&gt;

&lt;script&gt;
 var links = [
  'pdfs/IMG.pdf',
  'pdfs/IMG_0001.pdf',
 'pdfs/IMG_0002.pdf',
 'pdfs/IMG_0003.pdf',
'pdfs/IMG_0004.pdf',
'pdfs/IMG_0005.pdf',
 'pdfs/IMG_0006.pdf'

];

function downloadAll(urls) {
  var link = document.createElement('a');

  link.setAttribute('download','Balance Sheet Year 2014-2015');
  link.style.display = 'none';

  document.body.appendChild(link);

  for (var i = 0; i &lt; urls.length; i++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }

  document.body.removeChild(link);
}
&lt;/script&gt;
</code></pre>


blocks|key|1104064|text|我正在寻找一个解决方案来做到这一点，但是解压javascript中的文件并不像我喜欢的那样干净。我决定将这些文件封装到一个SVG文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1104065|如果文件存储在服务器上(我没有)，只需在SVG中设置href即可。|1104066|在我的示例中，我将文件转换为base64并将它们嵌入到SVG中。|1104067|编辑:+SVG运行得非常好。如果您只打算下载文件，ZIP可能更好。如果您要显示这些文件，那么SVG似乎更好。|1104068|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>I am looking for a solution to do this, but unzipping the files in javascript was not as clean as I liked. I decided to encapsulate the files into a single SVG file. </p>

<p>If you have the files stored on the server (I don't), you can simply set the href in the SVG.</p>

<p>In my case, I'll convert the files to base64 and embed them in the SVG.</p>

<p>Edit: The SVG worked very well. If you are only going to download the files, ZIP might be better. If you are going to display the files, then SVG seems superior.</p>


blocks|key|1104119|text|使用Ajax组件时，可以启动多个下载。因此，您必须使用https://cwiki.apache.org/confluence/display/WICKET/AJAX%2Bupdate%2Band%2Bfile%2Bdownload%2Bin%2Bone%2Bblow|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1104120|将AJAXDownload的实例添加到您的页面或其他任何位置。创建AjaxButton并覆盖onSubmit。创建AbstractAjaxTimerBehavior并开始下载。|1104121|++++++++button+=+new+AjaxButton("button2")+{

++++++++private+static+final+long+serialVersionUID+=+1L;

++++++++@Override
++++++++protected+void+onSubmit(AjaxRequestTarget+target,+Form<?>+form)
++++++++{
++++++++++++MultiSitePage.this.info(this);
++++++++++++target.add(form);

++++++++++++form.add(new+AbstractAjaxTimerBehavior(Duration.milliseconds(1))+{

++++++++++++++++@Override
++++++++++++++++protected+void+onTimer(AjaxRequestTarget+target)+{
++++++++++++++++++++download.initiate(target);
++++++++++++++++}

++++++++++++});+++++
++++++++}|code-block|syntax|javascript|1104122|下载愉快！|1104123|entityMap|0|LINK|mutability|MUTABLE|url|https://cwiki.apache.org/confluence/display/WICKET/AJAX%2Bupdate%2Band%2Bfile%2Bdownload%2Bin%2Bone%2Bblow^0|R|2K|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>When using Ajax components it is possible to start multiple downloads. Therefore you have to use <a href="https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow" rel="nofollow noreferrer">https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow</a></p>

<p>Add an instance of AJAXDownload to your Page or whatever. Create an AjaxButton and override onSubmit. Create an AbstractAjaxTimerBehavior and start downloading.</p>

<pre><code>        button = new AjaxButton("button2") {

        private static final long serialVersionUID = 1L;

        @Override
        protected void onSubmit(AjaxRequestTarget target, Form&lt;?&gt; form)
        {
            MultiSitePage.this.info(this);
            target.add(form);

            form.add(new AbstractAjaxTimerBehavior(Duration.milliseconds(1)) {

                @Override
                protected void onTimer(AjaxRequestTarget target) {
                    download.initiate(target);
                }

            });     
        }
</code></pre>

<p>Happy downloading!</p>


blocks|key|1104177|text|这适用于所有浏览器(IE11、火狐、Edge、Chrome和Chrome+Mobile)我的文档在多个选定元素中。当你尝试做得太快时，浏览器似乎有问题...所以我使用了暂停。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1104178|//user+clicks+a+download+button+to+download+all+selected+documents
$('#downloadDocumentsButton').click(function+()+{
++++var+interval+=+1000;
++++//select+elements+have+class+name+of+"document"
++++$('.document').each(function+(index,+element)+{
++++++++var+doc+=+$(element).val();
++++++++if+(doc)+{
++++++++++++setTimeout(function+()+{
++++++++++++++++window.location+=+doc;
++++++++++++},+interval+*+(index+%2B+1));
++++++++}
++++});
});|code-block|syntax|javascript|1104179|这是一个使用promises的解决方案：|1104180|+function+downloadDocs(docs)+{
++++++++docs[0].then(function+(result)+{
++++++++++++if+(result.web)+{
++++++++++++++++window.open(result.doc);
++++++++++++}
++++++++++++else+{
++++++++++++++++window.location+=+result.doc;
++++++++++++}
++++++++++++if+(docs.length+>+1)+{
++++++++++++++++setTimeout(function+()+{+return+downloadDocs(docs.slice(1));+},+2000);
++++++++++++}
++++++++});
++++}

+$('#downloadDocumentsButton').click(function+()+{
++++++++var+files+=+[];
++++++++$('.document').each(function+(index,+element)+{
++++++++++++var+doc+=+$(element).val();
++++++++++++var+ext+=+doc.split('.')[doc.split('.').length+-+1];

++++++++++++if+(doc+&&+$.inArray(ext,+docTypes)+>+-1)+{
++++++++++++++++files.unshift(Promise.resolve({+doc:+doc,+web:+false+}));
++++++++++++}
++++++++++++else+if+(doc+&&+($.inArray(ext,+webTypes)+>+-1+%7C%7C+ext.includes('?')))+{
++++++++++++++++files.push(Promise.resolve({+doc:+doc,+web:+true+}));
++++++++++++}
++++++++});

++++++++downloadDocs(files);
++++});|1104181|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This works in all browsers (IE11, firefox, Edge, Chrome and Chrome Mobile) My documents are in multiple select elements. The browsers seem to have issues when you try to do it too fast... So I used a timeout.</p>

<pre><code>//user clicks a download button to download all selected documents
$('#downloadDocumentsButton').click(function () {
    var interval = 1000;
    //select elements have class name of "document"
    $('.document').each(function (index, element) {
        var doc = $(element).val();
        if (doc) {
            setTimeout(function () {
                window.location = doc;
            }, interval * (index + 1));
        }
    });
});
</code></pre>

<p>This is a solution that uses promises:</p>

<pre><code> function downloadDocs(docs) {
        docs[0].then(function (result) {
            if (result.web) {
                window.open(result.doc);
            }
            else {
                window.location = result.doc;
            }
            if (docs.length &gt; 1) {
                setTimeout(function () { return downloadDocs(docs.slice(1)); }, 2000);
            }
        });
    }

 $('#downloadDocumentsButton').click(function () {
        var files = [];
        $('.document').each(function (index, element) {
            var doc = $(element).val();
            var ext = doc.split('.')[doc.split('.').length - 1];

            if (doc &amp;&amp; $.inArray(ext, docTypes) &gt; -1) {
                files.unshift(Promise.resolve({ doc: doc, web: false }));
            }
            else if (doc &amp;&amp; ($.inArray(ext, webTypes) &gt; -1 || ext.includes('?'))) {
                files.push(Promise.resolve({ doc: doc, web: true }));
            }
        });

        downloadDocs(files);
    });
</code></pre>


blocks|key|1104195|text|使用ajax调用获取url列表，然后使用jquery+plugin并行下载多个文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1104196|++$.ajax({
++++++++type:+"POST",
++++++++url:+URL,
++++++++contentType:+"application/json;+charset=utf-8",
++++++++dataType:+"json",
++++++++data:+data,
++++++++async:+true,
++++++++cache:+false,
++++++++beforeSend:+function+()+{
++++++++++++blockUI("body");
++++++++},
++++++++complete:+function+()+{+unblockUI("body");+},
++++++++success:+function+(data)+{
+++++++++++//here+data+-->+contains+list+of+urls+with+comma+seperated
++++++++++++var+listUrls=+data.DownloadFilePaths.split(',');
++++++++++++listUrls.forEach(function+(url)+{
++++++++++++++++$.fileDownload(url);
++++++++++++});
++++++++++++return+false;+
++++++++},
++++++++error:+function+(result)+{
++++++++++++$('#mdlNoDataExist').modal('show');
++++++++}

++++});|code-block|syntax|javascript|1104197|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryfiledownload.apphb.com/^0|K|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Getting list of url with ajax call and then use <a href="http://jqueryfiledownload.apphb.com/" rel="nofollow noreferrer">jquery plugin</a>  to download multiple files parallel.</p>

<pre><code>  $.ajax({
        type: "POST",
        url: URL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        async: true,
        cache: false,
        beforeSend: function () {
            blockUI("body");
        },
        complete: function () { unblockUI("body"); },
        success: function (data) {
           //here data --&gt; contains list of urls with comma seperated
            var listUrls= data.DownloadFilePaths.split(',');
            listUrls.forEach(function (url) {
                $.fileDownload(url);
            });
            return false; 
        },
        error: function (result) {
            $('#mdlNoDataExist').modal('show');
        }

    });
</code></pre>


blocks|key|1319148|text|下面是我做这件事的方法。我打开多个ZIP，但也有其他类型的数据(我导出项目在PDF中，同时许多ZIP与文件)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1319149|我只是复制了我的代码的一部分。从列表中的按钮发出的呼叫：|1319150|$url_pdf+=+"pdf.php?id=7";
$url_zip1+=+"zip.php?id=8";
$url_zip2+=+"zip.php?id=9";
$btn_pdf+=+"<a+href=\"javascript:;\"+onClick=\"return+open_multiple('','".$url_pdf.",".$url_zip1.",".$url_zip2."');\">\n";
$btn_pdf+.=+"<img+src=\"../../../images/icones/pdf.png\"+alt=\"Ver\">\n";
$btn_pdf+.=+"</a>\n"|code-block|syntax|javascript|1319151|因此，对JS例程的基本调用(Vanilla+rules!)下面是JS例程：|1319152|+function+open_multiple(base,url_publication)
+{
+++++//+URL+of+pages+to+open+are+coma+separated
+++++tab_url+=+url_publication.split(",");
+++++var+nb+=+tab_url.length;
+++++//+Loop+against+URL++++
+++++for+(var+x+=+0;+x+<+nb;+x%2B%2B)
+++++{
++++++++window.open(tab_url[x]);
++++++}

+++++//+Base+is+the+dest+of+the+caller+page+as
+++++//+sometimes+I+need+it+to+refresh
+++++if+(base+!=+"")
++++++{
++++++++window.location.href++=+base;
++++++}
+++}|1319153|诀窍是不提供ZIP文件的直接链接，而是将其发送到浏览器。如下所示：|1319154|++$type_mime+=+"application/zip,+application/x-compressed-zip";
+$the_mime+=+"Content-type:+".$type_mime;
+$tdoc_size+=+filesize+($the_zip_path);
+$the_length+=+"Content-Length:+"+.+$tdoc_size;
+$tdoc_nom+=+"Pesquisa.zip";
+$the_content_disposition+=+"Content-Disposition:+attachment;+filename=\"".$tdoc_nom."\"";

++header("Cache-Control:+no-cache,+must-revalidate");+//+HTTP/1.1
++header("Expires:+Sat,+26+Jul+1997+05:00:00+GMT");+++//+Date+in+the+past
++header($the_mime);
++header($the_length);
++header($the_content_disposition);

++//+Clear+the+cache+or+some+"sh..."+will+be+added
++ob_clean();
++flush();
++readfile($the_zip_path);
++exit();|1319155|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Here is the way I do that. I open multiple ZIP but also other kind of data (I export projet in PDF and at same time many ZIPs with document).</p>

<p>I just copy past part of my code.
The call from a button in a list:</p>

<pre><code>$url_pdf = "pdf.php?id=7";
$url_zip1 = "zip.php?id=8";
$url_zip2 = "zip.php?id=9";
$btn_pdf = "&lt;a href=\"javascript:;\" onClick=\"return open_multiple('','".$url_pdf.",".$url_zip1.",".$url_zip2."');\"&gt;\n";
$btn_pdf .= "&lt;img src=\"../../../images/icones/pdf.png\" alt=\"Ver\"&gt;\n";
$btn_pdf .= "&lt;/a&gt;\n"
</code></pre>

<p>So a basic call to a JS routine (Vanilla rules!). 
here is the JS routine:</p>

<pre><code> function open_multiple(base,url_publication)
 {
     // URL of pages to open are coma separated
     tab_url = url_publication.split(",");
     var nb = tab_url.length;
     // Loop against URL    
     for (var x = 0; x &lt; nb; x++)
     {
        window.open(tab_url[x]);
      }

     // Base is the dest of the caller page as
     // sometimes I need it to refresh
     if (base != "")
      {
        window.location.href  = base;
      }
   }
</code></pre>

<p>The trick is to NOT give the direct link of the ZIP file but to send it to the browser. Like this:</p>

<pre><code>  $type_mime = "application/zip, application/x-compressed-zip";
 $the_mime = "Content-type: ".$type_mime;
 $tdoc_size = filesize ($the_zip_path);
 $the_length = "Content-Length: " . $tdoc_size;
 $tdoc_nom = "Pesquisa.zip";
 $the_content_disposition = "Content-Disposition: attachment; filename=\"".$tdoc_nom."\"";

  header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");   // Date in the past
  header($the_mime);
  header($the_length);
  header($the_content_disposition);

  // Clear the cache or some "sh..." will be added
  ob_clean();
  flush();
  readfile($the_zip_path);
  exit();
</code></pre>


blocks|key|1319213|text|为了解决这个问题，我创建了一个JS库来将多个文件直接流到客户端的zip中。主要的独特功能是，它没有内存的大小限制(所有内容都是流式的)，也没有压缩格式(如果内容超过4+4GB，它就使用zip64+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1319214|因为它不做压缩，所以它的性能也很好。|1319215|在npm或github上找到"downzip“！|offset|length|1319216|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/downzip|1|https://github.com/robbederks/downzip^0|0|0|1|3|0|5|6|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]|$F|X|G|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

<p>To solve this, I created a JS library to stream multiple files directly into a zip on the client-side. The main unique feature is that it has no size limits from memory (everything is streamed) nor zip format (it uses zip64 if the contents are more than 4GB).</p>

<p>Since it doesn't do compression, it is also very performant.</p>

<p>Find "downzip" it on <a href="https://www.npmjs.com/package/downzip" rel="nofollow noreferrer">npm</a> or <a href="https://github.com/robbederks/downzip" rel="nofollow noreferrer">github</a>!</p>


blocks|key|1319224|text|下面的脚本很好地完成了这项工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1319225|var+urls+=+[
'https://images.pexels.com/photos/432360/pexels-photo-432360.jpeg',
'https://images.pexels.com/photos/39899/rose-red-tea-rose-regatta-39899.jpeg'
];

function+downloadAll(urls)+{


++for+(var+i+=+0;+i+<+urls.length;+i%2B%2B)+{
++++forceDownload(urls[i],+urls[i].substring(urls[i].lastIndexOf('/')%2B1,urls[i].length))
++}
}
function+forceDownload(url,+fileName){
++++var+xhr+=+new+XMLHttpRequest();
++++xhr.open("GET",+url,+true);
++++xhr.responseType+=+"blob";
++++xhr.onload+=+function(){
++++++++var+urlCreator+=+window.URL+%7C%7C+window.webkitURL;
++++++++var+imageUrl+=+urlCreator.createObjectURL(this.response);
++++++++var+tag+=+document.createElement('a');
++++++++tag.href+=+imageUrl;
++++++++tag.download+=+fileName;
++++++++document.body.appendChild(tag);
++++++++tag.click();
++++++++document.body.removeChild(tag);
++++}
++++xhr.send();
}|code-block|syntax|javascript|1319226|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The following script done this job gracefully.</p>

<pre><code>var urls = [
'https://images.pexels.com/photos/432360/pexels-photo-432360.jpeg',
'https://images.pexels.com/photos/39899/rose-red-tea-rose-regatta-39899.jpeg'
];

function downloadAll(urls) {


  for (var i = 0; i &lt; urls.length; i++) {
    forceDownload(urls[i], urls[i].substring(urls[i].lastIndexOf('/')+1,urls[i].length))
  }
}
function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}
</code></pre>


<p>I am not sure if this is possible using standard web technologies.</p>

<p>I want the user to be able to download multiple files in a single action. That is click check boxes next to the files, and then get all the files that were checked.</p>

<p>Is it possible - if so what basic strategy do you recommend. I know I can use comets technology to create server side events that trigger an HttpResponse but I am hoping there is a simpler way. </p>


Download multiple files with a single action

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我不确定使用标准web技术是否可能做到这一点。我希望用户能够下载多个文件在一个单一的行动。也就是说，单击文件旁边的复选框，然后获取所有选中的文件。有没有可能--如果是的话，你推荐什么基本策略。我知道我可以使用comets技术来创建触发HttpResponse的服务器端事件，但我希望有一种更简单的方法。

问使用单个操作下载多个文件
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用单个操作下载多个文件EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用单个操作下载多个文件
EN