Maison > interface Web > js tutoriel > Pourquoi AJAX ne fonctionne-t-il pas pour les téléchargements de fichiers et quelle est la meilleure alternative ?

Pourquoi AJAX ne fonctionne-t-il pas pour les téléchargements de fichiers et quelle est la meilleure alternative ?

Barbara Streisand
Libérer: 2024-12-09 17:50:12
original
618 Les gens l'ont consulté

Why Doesn't AJAX Work for File Downloads, and What's the Best Alternative?

Téléchargement de fichiers avec des requêtes AJAX : un guide complet

Problème : Tentative de lancement d'une « demande de téléchargement ajax » le clic sur le bouton ne donne pas les résultats souhaités. Une démonstration en JavaScript et PHP est fournie ci-dessous :

JavaScript :

var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();
Copier après la connexion

PHP (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

Le code ci-dessus ne fonctionne pas comme prévu. Pouvez-vous nous donner un aperçu des étapes nécessaires pour résoudre ce problème ?

Solution :

Lancer un téléchargement de fichier via une requête AJAX n'est pas réalisable. Pour cette tâche, un accès direct au fichier est requis.

Solution mise à jour (27 avril 2015) :

Utiliser l'attribut « télécharger » :

  • HTML5 introduit l'attribut 'download'. Il est pris en charge par Firefox et Chrome, et sera bientôt inclus dans IE11. Il permet le téléchargement direct de fichiers sur la même origine.

JavaScript :

// Check if 'download' is supported
if ('download' in HTMLAnchorElement.prototype) {
    // Create an anchor element
    var anchor = document.createElement('a');

    // Set 'download' attribute and file URL
    anchor.download = 'file.txt';
    anchor.href = 'download.php';

    // Trigger file download
    anchor.click();
} else {
    // Fallback to previous method
    window.location = 'download.php';
}
Copier après la connexion

Solution originale :

Utiliser 'window.location' :

  • Contrairement aux requêtes AJAX, 'window.location' accède directement au fichier, déclenchant le téléchargement.

JavaScript :

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

Pour plus de simplicité, il est recommandé d'éviter complètement la requête AJAX et d'utiliser simplement 'fenêtre.emplacement'.

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!

source:php.cn
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