Maison > interface Web > js tutoriel > Comment puis-je déclencher des téléchargements de fichiers avec des requêtes Ajax ?

Comment puis-je déclencher des téléchargements de fichiers avec des requêtes Ajax ?

Mary-Kate Olsen
Libérer: 2024-12-19 14:56:09
original
983 Les gens l'ont consulté

How Can I Trigger File Downloads with Ajax Requests?

Téléchargement de fichiers avec des requêtes Ajax

La mise en œuvre d'une fonctionnalité permettant de télécharger des fichiers en cliquant sur un bouton à l'aide d'Ajax peut rencontrer des défis. Explorons une solution pour surmonter ces obstacles.

Tentative initiale

Une première tentative pour y parvenir consiste à créer une XMLHttpRequest et à envoyer une requête GET à un script PHP, comme montré ci-dessous :

javascript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();

download.php:
<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");    
readfile("file.txt");
?>
Copier après la connexion

Limitations

Cependant, cette méthode échoue en raison des contraintes du navigateur. Les requêtes Ajax ne peuvent pas déclencher directement l'invite de téléchargement ; au lieu de cela, il faut accéder au fichier pour que cela se produise.

Solution

Deux approches sont disponibles :

1. Utilisation de window.location et Fallback

Utilisez la propriété window.location pour accéder au script de téléchargement, déclenchant le téléchargement :

$.ajax({
    url: 'download.php',
    type: 'POST',
    success: function() {
        window.location = 'download.php';
    }
});
Copier après la connexion

2. Attribut de téléchargement HTML5

Pour les navigateurs modernes, l'attribut de téléchargement HTML5 peut être utilisé :

<a href="download.php" download>
  Download File
</a>
Copier après la connexion

Remarque :

- L'attribut de téléchargement n'est pris en charge que dans Chrome, Firefox et les versions ultérieures d'Internet Explorer.

- Assurez-vous que le fichier à télécharger provient de la même origine que la page hôte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal