Comment afficher et supprimer un fichier .gif de chargement lors du téléchargement d’un fichier?

J’ai un bouton qui, lorsque l’utilisateur clique dessus, doit télécharger un fichier en soumettant un formulaire à l’aide de POST. [ Modifier pour clarifier: le fichier en cours de téléchargement est généré dynamicment via un script PHP basé sur les valeurs de la forme masquée (que je modifie via jQuery en fonction du bouton cliqué). Le fichier en question est un fichier Excel. Si possible, je préférerais ne pas utiliser GET, car je ne veux pas que les gens accèdent directement au fichier.]

Je ne peux pas utiliser $.post pour soumettre le formulaire car cela ne fonctionne pas comme je le souhaiterais. Bien que la soumission se passe bien, elle ne déclenche pas la boîte de dialog de téléchargement dans le navigateur. Si je comprends bien, le contenu du fichier existe maintenant dans JavaScript et il n’ya aucun moyen (à ma connaissance) de vous permettre de l’envoyer au navigateur à partir de JavaScript pour téléchargement. Ainsi, d’autres solutions (par exemple, comment utiliser jQuery ou Ajax pour échanger l’image d’arrière-plan après la soumission d’un formulaire? ) Ne fonctionneront pas dans ce cas particulier.

La solution que j’ai trouvée consistait à utiliser le $("#someform").submit(); pour déclencher un formulaire caché lorsque l’utilisateur clique sur le bouton. La page ne se recharge pas et la boîte de dialog de sauvegarde apparaît à l’écran.

Exemple de code:

 $( "#button" ).click( function() { $(this).removeClass( "button" ); $(this).addClass( "loading" ); $( "#form" ).submit(); } );

Cependant, comme la génération du fichier pouvait prendre plusieurs secondes, je souhaitais afficher un gif d’animation de chargement à l’utilisateur. Cela pose maintenant le problème que je peux afficher l’animation, mais je ne peux pas supprimer l’animation après que le formulaire a été soumis.

Si cette méthode ne peut pas être utilisée, existe-t-il une meilleure solution que quelqu’un puisse suggérer?

Vous devez soit servir une URL au fichier .gif, soit la diffuser en tant que code Base64.

Lorsque vous submit le formulaire que la page entière va actualiser, l’image de chargement sera définitivement supprimée, sauf si vous ne l’ajoutez pas ailleurs lors du chargement de la page.

J’ai posté une réponse dans cette question qui montre comment faire cela. Voir la démonstration à l’ adresse http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php et les fichiers source à l’ adresse http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

Je l’ai fait avec 2 bibliothèques sous licence MIT: BinaryTransport et FileSaver . Dans cet exemple, je télécharge un fichier Excel généré côté serveur.

HTML (dans la balise head):

Javascript:

 function ExportToExcel(urlExcel, fileName){ $("body").css("cursor", "progress"); $.ajax({ url: urlExcel, type: "GET", dataType: 'binary', headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'}, processData: false, success: function(blob){ $("body").css("cursor", "default"); saveAs(blob, fileName); }, error : function(result, status, error){ $("body").css("cursor", "default"); } }); }

Pour une animation de chargement personnalisée, appelez-la simplement lorsque je modifie le type de curseur à ces lignes:

 $("body").css("cursor", "progress"); $("body").css("cursor", "default");