web-dev-qa-db-fra.com

Progression individuelle dans le téléchargement de fichier jQuery

Il m'a été recommandé d'utiliser le téléchargement de fichiers jQuery par blueimp.

Mais je ne parviens pas à mettre à jour la progression du fichier individuel. Je comprends comment les progrès combinés fonctionnent (comme documenté) 

progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
            console.log(progress);
        }

Comment faire la même chose pour chaque téléchargement? Comment récupérer l'élément DOM (barre de progression) lié à ce téléchargement particulier? Je pensais créer un identifiant par nom de fichier et taille de fichier, mais comme les utilisateurs pouvaient télécharger le même fichier deux fois (vers différentes destinations), cela ne fonctionnait pas.

Ceci est ma mise en œuvre pour le moment:

$('#fileupload').fileupload(
    {
        dataType: 'json',
        done: function (e, data) 
        {
            $.each(data.result.files, function (index, file) 
            {  
                //$('<p/>').text(file.name).appendTo(document.body); 
                //console.log('done with '+file.name);
            });
        },
        progressall: function (e, data) 
        {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            //$('#progress .bar').css('width', progress + '%');
            //console.log(progress);
        }
    }).on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {

            var node = $('<div class="progressBox"></div>');
            node.append('<div class="progressBoxBack"></div>');
            node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0%  0 ko/s  0 sec left</span></p>');
            node.append('<div class="progressBar"><div style="width:23%;"></div></div>');

            node.appendTo($('#progressContainer'));
        });
    });

Quelqu'un peut-il me dire comment ou m'indiquer une documentation que je n'ai pas pu trouver?

Solution

Pour identifier le téléchargement, vous pouvez ajouter des paramètres supplémentaires à l'objet fichier une fois ajouté. l'objet fichier reste le même dans l'événement progress (mais pas dans la méthode done) Donc, sur fileuploadadd:

.on('fileuploadadd', function (e, data) 
    {
        $.each(data.files, function (index, file) 
        {
            file.uploadID = 'someidentification' ;
        });
    });

puis lorsque vous gérez les progrès:

progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);

              console.log(data.files[0].uploadID); // returns 'someidentification'

        }
javascriptjqueryhtmlfile-uploadjquery-file-upload
18
Vincent Duprez

Selon la documentation, il y a un seul événement de progression :

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        progress: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
        },
        ...
2
Fractaliste

Je comprends que c’est une vieille question, mais les résultats de la recherche Google sur ce sujet la soulèvent assez souvent et la réponse fournie risque d’être plus compliquée que nécessaire pour un cas d’utilisation standard.

L'objet de données fournit une propriété de contexte que vous pouvez définir lorsque vous ajoutez le fichier pour lier un élément DOM à ce téléchargement de fichier particulier. Ceci est transmis et est disponible dans le rappel effectué. Vous pouvez simplement l'utiliser pour affecter la progression dans l'élément DOM lié. 

$("#fileupload").fileupload({

        ...

        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },

        ...

        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            data.context.text(progress + '%');
        }
    });
3
Alpaus

Dans php (à partir de la version 5.4), il y a quelque chose appelé session upload progress . Il vous permet de surveiller la progression du téléchargement sur des fichiers individuels. 

Il peut être assez fastidieux de le faire fonctionner mais vous pouvez trouver quelques exemples sur la façon de le combiner avec jquery dans votre requête XMLHttpRequest/Ajax lorsque vous effectuez une recherche dans Google .

Il est également mentionné ici dans la documentation du plug-in de téléchargement de fichier jquery

0
Wilt