départ de téléchargement de fichier avec JavaScript

Question

Disons que j'ai des liens de téléchargement pour les fichiers sur mon site. Lorsque cliqué sur ces liens envoyer une requête ajax vers le serveur qui renvoie l'URL de l'emplacement du fichier. Ce que je veux faire, c'est direct au navigateur de télécharger le fichier lorsque la réponse sera de retour. Est-il un portable façon de le faire?

Answer 1

Nous faire de cette façon: D'abord ajouter ce script.

<script type="text/javascript">
function populateIframe(id,path) 
{
    var ifrm = document.getElementById(id);
    ifrm.src = "download.php?path="+path;
}
</script>

L'endroit où vous souhaitez que le bouton télécharger(ici, nous utilisons simplement le lien):

<iframe id="frame1" style="display:none"></iframe>
<a href="javascript:populateIframe('frame1','<?php echo $path; ?>')">download</a>

Le fichier 'download.php' (il faut mettre sur votre serveur) contient:

<?php 
   header("Content-Type: application/octet-stream");
   header("Content-Disposition: attachment; filename=".$_GET['path']);
   readfile($_GET['path']);
?>

Ainsi, lorsque vous cliquez sur le lien, le caché iframe obtient alors/ouvre les fichiers source 'download.php'. Avec le chemin d'accès comme paramètre get. Nous pensons que c'est la meilleure solution!

Answer 2

J'ai créé un open source jQuery Téléchargement Fichier plugin (Démo avec des exemples) (GitHub), qui pourrait également aider avec votre situation. Il fonctionne assez similaire avec un iframe, mais a quelques fonctionnalités intéressantes que j'ai trouvé très pratique:

• L'utilisateur ne quitte jamais la même page, ils ont lancé le téléchargement d'un fichier à partir d'. Cette fonctionnalité est devenue cruciale pour les applications web modernes
• Testé croix-prise en charge du navigateur (y compris mobile!)
• Il prend en charge POST et GET demandes d'une manière similaire à du jQuery AJAX API
• successCallback et failCallback fonctions vous permettent d'être explicite sur ce que l'utilisateur voit dans les deux cas
• En collaboration avec jQuery UI un développeur peut facilement montrer une modale indiquant à l'utilisateur que le téléchargement d'un fichier est en cours, dissoudre le modal après le début du téléchargement ou même informer l'utilisateur d'une manière amicale qu'une erreur s'est produite. Voir la Démo pour un exemple de cette.

Answer 3

De lire les réponses - y compris les acceptée, j'aimerais souligner les implications sur la sécurité de passage d'un chemin d'accès directement à readfile via GET.

Il peut sembler évident pour certains, mais certains peuvent simplement copier/coller ce code:

<?php 
   header("Content-Type: application/octet-stream");
   header("Content-Disposition: attachment; filename=".$_GET['path']);
   readfile($_GET['path']);
?>

Donc ce qui arrive si je passe à quelque chose comme '/chemin/vers/fileWithSecrets " pour ce script? Le script sera heureux d'envoyer un fichier au serveur de l'utilisateur a accès.

Veuillez vous référer à cette discussion pour plus d'informations comment faire pour éviter cela: Comment faire un chemin d'accès au fichier est dans un sous-répertoire?

Answer 4

Si c'est votre propre serveur d'application, je vous conseille d'utiliser l'en-tête suivant

Content-disposition: attachment; filename=fname.ext

Cela va forcer n'importe quel navigateur pour télécharger le fichier et ne pas l'afficher dans la fenêtre du navigateur.

Answer 5

Appelez simplement window.location.href = new_url de votre javascript et il va rediriger le navigateur vers l'URL que l'utilisateur a tapé dans la barre d'adresse