Envoyer plusieurs fichiers à l'utilisateur pour le télécharger l'un après l'autre

J'essaie de faire ce qui suit:

  • Une grille avec beaucoup de fichiers est affichée à l'utilisateur
  • L'utilisateur sélectionne autant de fichiers qu'il veut
  • L'utilisateur doit être invité à chaque fichier pour l'emplacement cible
  • Chaque fichier doit être téléchargé l'un après l'autre

Je ne peux pas trouver une bonne solution pour cela car:

  • J'ai besoin d'une solution de navigateur croisé (pas de plugins) mais je peux compter sur IE10 + et HTML5
  • Les fichiers ne doivent pas être téléchargés en tant que fichier zip ou toute autre archive
  • L'utilisation de document.write pour insérer plusieurs iframes se sent mal et est découragée par la plupart des navigateurs

J'ai réussi à créer un exemple possible de téléchargement de plusieurs fichiers à l'aide de l'API HTML FileSystem. J'ai rencontré quelques problèmes lors de la construction de ce que je vais noter ci-dessous. Veillez à ce que ce ne soit qu'un exemple et puisse être amélioré par beaucoup (en fonction des codes et des fonctionnalités).

J'ai cessé de développer parce que je ne pouvais pas transférer des fichiers binaires, mais peut-être que quelqu'un peut me donner un indice sur la façon de le faire. (Je lutte avec les transferts binaires d'ajax et JSON en ce moment. (Je ne peux pas dire s'il est possible de transférer des images / binaires sur ajax du tout).

Sourcecode publié sur GitHub: https://github.com/posixpascal/FileSystem-API-Exemple

Quelques choses à noter:

  • Vos utilisateurs doivent cliquer sur "Autoriser cette page Web à télécharger plusieurs fichiers" dès que la fenêtre contextuelle est visible. Sinon, cela ne fonctionnera pas.

  • Cela utilise des opérations d'E / S lourdes du côté du serveur (au moins avec mon code). Il faut réécrire cela avant d'utiliser ce script.

  • Soyez conscient de ce problème: https://code.google.com/p/chromium/issues/detail?id=94314 Les utilisateurs ayant des caractères non latins dans leur nom d'utilisateur Windows ne sont pas en mesure de télécharger les fichiers.

  • Vous ne pouvez pas reprendre le téléchargement si vous utilisez TEMPORARY FileSystem Storage. (Chrome lance une erreur sur ma machine lorsque j'essaie d'accéder aux fichiers téléchargés deux fois)

  • Soyez également conscient des boucles, car il peut vider les navigateurs d'autres personnes.

    1. Exemple de Youtube: https://www.youtube.com/watch?v=F9T4i4qrYtc&list=UUi1sRIczZxhsuWPPUK7xxTA
    2. Exemple en direct: http://pascalraszyk.de/_broken_do_not_use/

Tout ce que je peux dire, c'est que ce n'est pas une solution pour le moment et que l'API n'est pas prête pour la masse. Vous pouvez ajouter un autre support en utilisant Flash et d'autres utils pour compenser le manque de support de FileSystem API.

Comment ça marche:

Dès que l'utilisateur clique sur le lien de téléchargement, mon script regroupe des informations sur les fichiers en utilisant un script PHP côté serveur. Ensuite, il demande quelques morceaux jusqu'à ce que le fichier de fichier localement stocké correspond à celui envoyé par le script php.

Dès que le fichier est prêt, je crée une étiquette invisible et définie href dans "système de fichiers: myurl.de/theFile" et déclenche un événement de clic sur ce lien. J'ajoute également la propriété 'download' pour que le navigateur soit obligé de télécharger des fichiers .txt aussi.

Ce n'est pas une solution complète à votre problème, mais vous pouvez vérifier le code source et, espérons-le, créé quelque chose en fonction de vos besoins. Je suppose que vous avez déjà passé à une approche différente pour télécharger plusieurs fichiers.

J'ai trouvé une solution qui fonctionne (pour moi) dans tous les navigateurs. Il ne se sent pas bien sur le côté du code (au début), mais il me semble assez stable sur différents navigateurs et différentes machines.

Chrome demandera à l'utilisateur de permettre au site de télécharger plusieurs fichiers. IE ne se soucie pas du tout.

 var onDownload = function(){ var docs = module.getSelectedElements(); for(var i = 0; i < docs.length; i ++) { (function(){ var doc = docs[i]; window.setTimeout(function(){ $jq("#downloadIframe").attr("src", doc.url); }, i * 500); })(); } };