117 votes

Télécharger plusieurs fichiers avec une seule action

Je ne suis pas sûr que cela soit possible en utilisant des technologies web standard.

Je veux que l'utilisateur puisse télécharger plusieurs fichiers en une seule action. C'est cliquer sur les cases à cocher à côté des fichiers, puis obtenir tous les fichiers qui ont été vérifiés.

Est-il possible - dans l'affirmative, quelle stratégie de base recommandez-vous ? Je sais que je peux utiliser la technologie Comets pour créer des événements côté serveur qui déclenchent une réponse HttpResponse, mais j'espère qu'il y a un moyen plus simple.

91voto

Matěj Pokorný Points 1427

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++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }

  document.body.removeChild(link);
}
<button onclick="downloadAll(window.links)">Test me!</button>

61voto

Jacob Relkin Points 90729

HTTP ne prend pas en charge plus d'un téléchargement de fichier à la fois.

Il existe deux solutions :

  • Ouvrir x quantité de fenêtres pour lancer les téléchargements de fichiers (ce qui serait fait avec JavaScript)
  • solution préférée créer un script pour compresser les fichiers

59voto

Dmitry Nogin Points 1295

Vous pouvez créer un ensemble temporaire d'iframes cachées, lancer le téléchargement par GET ou POST à l'intérieur d'elles, attendre que les téléchargements commencent et supprimer les iframes :

<!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>

Ou, sans 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);
    });
  }

5voto

Thilo Points 108673

Le moyen le plus simple serait de servir les multiples fichiers regroupés dans un fichier ZIP.

Je suppose que vous pouvez lancer plusieurs téléchargements de fichiers en utilisant un tas d'iframes ou popups, mais du point de vue de la convivialité, un fichier ZIP est encore mieux. Qui veut cliquer sur dix boîtes de dialogue "Enregistrer sous" que le navigateur va afficher ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X