I have a problem to download multiple file without JavaScript. May I know is possible HTML download Attribute can download multiple file without using JavaScript?

Below is my coding:

<a  href="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e" download><button style="background-color:#ED1C24;color:white" >Article</button></a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

For example, if I want to download these https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e and https://dco-assets.everestads.net/iCornerStore/source-images/MICROSOFTSTORE/current/cc1b5d10e9ab7ea9c03e62e1cc6172b6.png. I try to modify like below the code, but it doesn't work.

<a  href="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e,https://dco-assets.everestads.net/iCornerStore/source-images/MICROSOFTSTORE/current/cc1b5d10e9ab7ea9c03e62e1cc6172b6.png" download><button style="background-color:#ED1C24;color:white" >Article</button></a>

Hope someone can guide me on how to solve this problem. Thanks.

*Note: Why I don't using Javascript because I am doing in Magento 1.7 version to add download multiple image function.

CodePudding user response：

The best way to do this is to have your files zipped and link to that.

Which states the following:

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

Having said this, I would still go with zipping the file, as this implementation requires JavaScript and can also sometimes be blocked as popups.

Option 2 is to have multiple link to the download button.

HTML:

<a href="#" class="yourlink">Click Here</a>

JS:

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('http://yoururl1.com');
    window.open('http://yoururl2.com');
});

Minimized Code for multiple links in one button:

<a href="http://google.com" 
     onclick="window.open('http://web1.com','','width=700,height=700'); 
               window.open('http://web2.com','','width=700,height=500');"
               >Click Here</a>

CodePudding user response：

Short answer. What you want is not possible with an single HTML link only. I can think of the following alternative possibilities without Javascript:

1. Multiple links
2. ZIP file

If you can't target a zip file, then only with multiple links.

UPDATE (JS Version)

With pure JS it can look like this:

const el = document.getElementById('multiple-dl');

el.addEventListener('click', (event) => {
  event.preventDefault();
  const anchor = event.target;
  const links = anchor.getAttribute('data-dlinks');
  const linkList = links.split(',');
  
  linkList.forEach((link) => {
    console.log(link)
    window.open(link);  
  });  
})

<a href="#" id="multiple-dl" class="" data-dlinks="https://www.links1.com,https://www.links1.com">multiple DLinks</a>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>