Télécharger le fichier à l'aide de jQuery


113

Comment puis-je demander un téléchargement à un utilisateur lorsqu'il clique sur un lien.

Par exemple, au lieu de:

<a href="uploads/file.doc">Download Here</a>

Je pourrais utiliser:

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

De cette façon, Google n'indexe pas mes fichiers HREF et privés.

Cela peut-il être fait avec jQuery, si oui, comment? Ou est-ce que cela devrait être fait avec PHP ou quelque chose à la place?


Copie possible du fichier
Liam

Réponses:


165

Je pourrais suggérer ceci, comme une solution plus gracieusement dégradante, en utilisant preventDefault:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

Même s'il n'y a pas de Javascript, au moins de cette façon, l'utilisateur recevra des commentaires.


20
jQuery est la réponse.
Esteban Küber

Merci, c'est ce que je cherchais. J'utilise habituellement "preventDefault", je l'ai juste laissé de côté parce que j'étais paresseux. ;-)
Dodinas

2
Fonctionne très bien, mais obtient des erreurs de type MIME. Curieux de savoir s'il existe des moyens de les surmonter?
Nathan Hangen

2
Avez-vous résolu l'avertissement de type MIME? J'obtiens "Ressource interprétée comme Document mais transférée avec le type MIME ..." Merci beaucoup.
user1824269

22

Si vous ne voulez pas que les moteurs de recherche indexent certains fichiers, vous pouvez utiliser le fichier robots.txt pour dire aux web spiders de ne pas accéder à certaines parties de votre site Web.

Si vous comptez uniquement sur javascript, certains utilisateurs qui naviguent sans lui ne pourront pas cliquer sur vos liens.


1
Bon à savoir sur le 'robots.txt'. Je vous remercie.
Dodinas

@Rob, si vous avez besoin que les URL soient "privées", robots.txtcela n'aiderait pas car elles seraient toujours stockées dans l'historique du navigateur et les serveurs intermédiaires.
Pacerier

3
6 ans plus tard: naviguer sans javascript? - eh bien, vous pouvez aussi faire une promenade à la place.
low_rents

près de 10 ans plus tard: pareil! ou ?
toing_toing

18

Voici un bel article qui montre de nombreuses façons de cacher des fichiers aux moteurs de recherche:

http://antezeta.com/news/avoid-search-engine-indexing

JavaScript n'est pas un bon moyen de ne pas indexer une page; cela n'empêchera pas les utilisateurs de créer un lien direct vers vos fichiers (et donc de les révéler aux robots d'exploration) et, comme Rob l'a mentionné, ne fonctionnerait pas pour tous les utilisateurs.
Une solution simple consiste à ajouter l' rel="nofollow"attribut, mais encore une fois, ce n'est pas complet sans robots.txt.

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

2
Voici un autre article de l'aide de Google pour les webmasers qui m'aide beaucoup à comprendre le "nofollow" ou "me" rel.
000

12

Oui, vous devrez changer le window.location.href en l'URL du fichier que vous souhaitez télécharger.

window.location.href = 'http://www.com/path/to/file';

et si l'extension de fichier est .html, au lieu de télécharger, il sera redirigé vers ce fichier html
Kaleem Nalband

9
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

aucune erreur, le téléchargement ne démarre pas. Je pense qu'il manque peut-être un certain point lors de la création de l'élément.
shyammakwana.me

vérifiez dans votre html si un élément <a> a été créé ou non et vérifiez le lien de votre fichier.
EL missaoui habib

une étiquette était là, dans le corps. et en cliquant manuellement sur le téléchargement de l'image. cependant ce n'est pas nécessaire maintenant, j'ai utilisé cette solution vanillaJS.
shyammakwana.me

il n'y a aucune raison de ne pas fonctionner si le lien est correct. tester le lien directement dans parcourir
EL missaoui habib

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');je l'ai utilisé.
shyammakwana.me

7
  • Utilisation de la fonction jQuery

        var valFileDownloadPath = 'http//:'+'your url';
    
       window.open(valFileDownloadPath , '_blank');

6

En indiquant que window.location.href = 'uploads/file.doc';vous montrez où vous stockez vos fichiers. Vous pouvez bien sûr utiliser .htacess pour forcer le comportement requis pour les fichiers stockés, mais cela peut ne pas toujours être une poignée ...

Il est préférable de créer un fichier php côté serveur et d'y placer ce contenu:

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);
readfile('../some_folder/some_subfolder/'.$_REQUEST['f']); 
exit;

Ce code renverra TOUT fichier en téléchargement sans montrer où vous le stockez réellement.

Vous ouvrez ce fichier php via window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


Cette solution m'a aidé à résoudre les problèmes de téléchargement sur mon site, merci!
Denniz

3

Les iframes cachés peuvent aider


var redeemFrame = document.createElement ("iframe"); var src = "doDownload.php"; redeemFrame.setAttribute ("src", src); redeemFrame.setAttribute ("style", "display: none"); document.body.appendChild (redeemFrame);
DarthRez

3

Je vous suggère d'utiliser l'événement mousedown, qui s'appelle AVANT l'événement de clic. De cette façon, le navigateur gère l'événement de clic naturellement, ce qui évite toute bizarrerie du code:

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

Voir ici pour un article similaire sur l'utilisation de jQuery pour effacer les formulaires: Réinitialiser un formulaire en plusieurs étapes avec jQuery

Vous pouvez également rencontrer un problème où les valeurs sont repeuplées par la pile de valeurs Struts. En d'autres termes, vous soumettez votre formulaire, faites ce que vous voulez dans la classe d'action, mais n'effacez pas les valeurs de champ associées dans la classe d'action. Dans ce scénario, le formulaire semble conserver les valeurs que vous avez soumises précédemment. Si vous les persistez d'une manière ou d'une autre, annulez simplement chaque valeur de champ dans votre classe d'action après avoir persisté et avant de renvoyer SUCCESS.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.