Afficher une barre de progression pour le téléchargement de fichiers à l'aide de XHR2/AJAX

Je suis en train de télécharger des fichiers à l'aide d'Ajax et de montrer une coutume barre de progression du téléchargement.

Le problème est que je ne peux pas comprendre comment le faire. J'ai écrit le code pour le journal le progrès, mais ne sais pas comment faire pour lancer le téléchargement.

REMARQUE: Les fichiers sont de types différents.

Merci d'avance.

JS

//Downloading of files
filelist.on('click', '.download_link', function(e){
    e.preventDefault();
    var id = $(this).data('id');
    $(this).parent().addClass("download_start");

    $.ajax({
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            //Handle Download Progress
            xhr.addEventListener("progress", function (evt) {
                if(evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                }
            }, false);
            return xhr;
        },
        complete: function () {
            console.log("Request finished");
        }
    })
});

HTML et PHP

    <li>
    <div class="f_icon"><img src="' . $ico_path . '"></div>
    <div class="left_wing">
       <div class="progressbar"></div>
       <a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
       <div class="f_time_size">' . date("M d, Y", $file_upload_time) . '&nbsp; &#149; &nbsp;' . human_filesize($file_size) . '</div>
    </div>

    <div class="right_wing">
       <div class="f_delete">
       <a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'"><i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
       </a>
    </div>
   </div>
    </li>
Comment êtes-vous d'envoyer le fichier que vous avez téléchargé à l'utilisateur?
Si vous vous demandez comment suis-je télécharger un fichier, et bien, c'est ce que je veux savoir comment dois-je télécharger le fichier.
Il a regardé comme si vous étiez à se demander comment montrer le progrès, mais, à la lecture, c'est un supplément pour le téléchargement. Réponse Simple: ne pas utiliser de l'ajax pour télécharger un fichier, utilisez le navigateur. <a href='url to download' target='_blank'>download</a>
Oui, qui peut évidemment être fait, mais j'ai besoin d'afficher la progression du téléchargement car c'est la partie de l'INTERFACE utilisateur
Il y a une réponse ici stackoverflow.com/questions/399641/ajax-page-download-progress mais une meilleure discussion ici stackoverflow.com/questions/76976/...

OriginalL'auteur Ayan | 2016-09-20

  1. 16

    Si vous voulez montrer à l'utilisateur une barre de progression du téléchargement de processus, vous devez faire le téléchargement dans le xmlhttprequest. L'un des problèmes, c'est que si vos fichiers sont gros, ils seront sauvés dans la mémoire du navigateur avant que le navigateur va les écrire sur le disque (en cas d'utilisation régulière de télécharger des fichiers sont en train d'être enregistrées directement sur le disque, ce qui permet d'économiser beaucoup de mémoire sur les gros fichiers).

    Une autre chose importante à noter - pour que les lengthComputable pour être vrai, votre serveur doit envoyer le Content-Length - tête avec la taille du fichier.

    Voici le code javascript: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1" data-filename="filename.xml">Click to download</div>
<script>
$('#a1').click(function() {
var that = this;
var page_url = 'download.php';
var req = new XMLHttpRequest();
req.open("POST", page_url, true);
req.addEventListener("progress", function (evt) {
if(evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
var filename = $(that).data('filename');
if (typeof window.chrome !== 'undefined') {
//Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
//IE version
var blob = new Blob([req.response], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
//Firefox version
var file = new File([req.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
}
};
req.send();
});
</script>

    Et voici un exemple pour le code php, vous pouvez utiliser:

    <?php
$filename = "some-big-file";
$filesize = filesize($filename);
header("Content-Transfer-Encoding: Binary");
header("Content-Length:". $filesize);
header("Content-Disposition: attachment");
$handle = fopen($filename, "rb");
if (FALSE === $handle) {
exit("Failed to open stream to URL");
}
while (!feof($handle)) {
echo fread($handle, 1024*1024*10);
sleep(3);
}
fclose($handle);

    Noter que j'ai ajouté un sommeil de simuler une connexion lente pour les tests sur localhost.

    Vous devriez supprimer cette sur la production 🙂

    L'exemple parfait de forcer le téléchargement à l'aide d'ajax
    merci pour ce commentaire 🙂
    cela m'a beaucoup aidé pendant le suivi de la vitesse de téléchargement par MO
    content que cela m'a aidé 🙂
    sain et utile exemple. Merci beaucoup.

    OriginalL'auteur Dekel