Barre de progression du téléchargement de fichiers avec jQuery

Question

J'essaie de mettre en œuvre une fonction de téléchargement de fichiers AJAX dans mon projet. J'utilise jQuery pour cela ; mon code soumet les données en utilisant AJAX. Je souhaite également mettre en place une barre de progression de téléchargement de fichiers. Comment puis-je faire cela ? Existe-t-il un moyen de calculer la quantité de données déjà téléchargées afin de pouvoir calculer le pourcentage de téléchargement et créer une barre de progression ?

Answer 1

Je l'ai fait avec jQuery uniquement :

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        percentComplete = parseInt(percentComplete * 100);
        console.log(percentComplete);

        if (percentComplete === 100) {

        }

      }
    }, false);

    return xhr;
  },
  url: posturlfile,
  type: "POST",
  data: JSON.stringify(fileuploaddata),
  contentType: "application/json",
  dataType: "json",
  success: function(result) {
    console.log(result);
  }
});

Answer 2

Nota: Cette question est liée à la plugin de formulaire jQuery . Si vous recherchez une solution purement jQuery, commencer ici . Il n'existe pas de solution jQuery globale pour tous les navigateurs. Vous devez donc utiliser un plugin. J'utilise dropzone.js qui ont une solution de repli facile pour les navigateurs plus anciens. Le plugin que vous préférez dépend de vos besoins. Il y a beaucoup de bons comparatifs sur le marché.

Desde el exemples :

jQuery :

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
}); 

html :

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

vous devez styliser la barre de progression avec css...

Answer 3

J'ai utilisé les éléments suivants dans mon projet. Vous pouvez aussi essayer.

ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {

    if (ajax.status) {

        if (ajax.status == 200 && (ajax.readyState == 4)){
            //To do tasks if any, when upload is completed
        }
    }
}
ajax.upload.addEventListener("progress", function (event) {

    var percent = (event.loaded / event.total) * 100;
    //**percent** variable can be used for modifying the length of your progress bar.
    console.log(percent);

});

ajax.open("POST", 'your file upload link', true);
ajax.send(formData);
//ajax.send is for uploading form data.

Answer 4

Regarde ça : http://hayageek.com/docs/jquery-upload-file.php Je l'ai trouvé accidentellement sur le net.

Answer 5

Si vous utilisez jquery sur votre projet, et que vous ne voulez pas implémenter le mécanisme de téléchargement à partir de zéro, vous pouvez utiliser https://github.com/blueimp/jQuery-File-Upload .

Ils disposent d'une très belle interface utilisateur avec sélection multiple de fichiers, prise en charge du glisser-déposer, barre de progression, images de validation et de prévisualisation, prise en charge de plusieurs domaines, téléchargements de fichiers par morceaux et résumables. Et ils ont des exemples de scripts pour plusieurs langages de serveur (node, php, python et go).

Url de démonstration : https://blueimp.github.io/jQuery-File-Upload/ .