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
Barbara Streisandoriginal
2024-12-09 17:50:12588parcourir

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();

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");
?>

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';
}

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';
    }
});

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!

Déclaration:
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