web-dev-qa-db-fra.com

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

J'essaie de télécharger des fichiers à l'aide d'Ajax et d'afficher un personnalisé barre de progression du téléchargement.

Le problème est que je ne comprends pas comment procéder. J'ai écrit le code pour enregistrer la progression mais je ne sais pas comment lancer le téléchargement.

REMARQUE: Les fichiers sont de différents types.

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>
javascriptjqueryajaxxmlhttprequest
11
Ayan

Si vous souhaitez afficher à l'utilisateur une barre de progression du processus de téléchargement - vous devez effectuer le téléchargement dans la requête xmlhttprequest. L'un des problèmes ici est que si vos fichiers sont volumineux - ils seront enregistrés dans la mémoire du navigateur avant que le navigateur ne les écrive sur le disque (lors de l'utilisation des fichiers de téléchargement standard, ils sont enregistrés directement sur le disque, ce qui économise beaucoup de mémoire sur les gros fichiers).

Une autre chose importante à noter - pour que le lengthComputable soit vrai - votre serveur doit envoyer le Content-Length en-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 que 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);

Notez que j'ai ajouté un sommeil pour simuler une connexion lente pour les tests sur localhost.
Vous devriez supprimer cela en production :)

20
Dekel