Me han recomendado el uso de jQuery file upload por blueimp.

Pero no puedo actualizar el archivo individual de progreso. Entiendo cómo la combinación de progreso de trabajos (documentadas)

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

Cómo hacer lo mismo para cada sola carga? ¿Cómo puedo recuperar el elemento DOM (progressbar) vinculados a este particular subir? Yo estaba pensando acerca de la creación de un identificador de nombre de archivo y el tamaño del archivo, pero como los usuarios pueden subir el mismo archivo dos veces (una para diferentes destinos) esto no funciona.

Esta es mi aplicación en el momento:

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

¿Alguien puede decirme cómo o me apunte a la documentación no he sido capaz de encontrar?

Solución


Para identificar la carga, puede añadir parámetros adicionales para el archivo de objeto cuando se agregan. el archivo objeto se mantiene la misma en el evento progress (Pero no en el hecho de método)
Así que en fileuploadadd:

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

a continuación, a la hora de manejar el progreso:

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

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

        }

3 Comentarios

  1. 2

    De acuerdo a la documentación que hay un único evento progress :

    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            progress: function (e, data) {
                  var progress = parseInt(data.loaded / data.total * 100, 10);
            },
            ...
    • Gracias! Pero, ¿Cómo saber a qué archivo se refiere?
    • Esto debe ser incluido en la variable de datos. Dime si no logras conseguirlo.
    • Ok encontrado.. no hay ninguna identificación, pero el objeto se mantiene la misma
    • añadido a mi pregunta original
  2. 3

    Entiendo que esto es una vieja pregunta, pero sale bastante más alta en los resultados de Búsqueda de Google sobre este tema y la respuesta puede ser más complicado de lo que se requiere para el caso de uso estándar.

    El objeto de datos proporciona un contexto de propiedad que se puede establecer cuando se agrega el archivo a la corbata un elemento de DOM a ese archivo en particular subir. Esto pasa alrededor y está disponible en el hecho de devolución de llamada y se puede utilizar simplemente para afectar el progreso dentro de los vinculados elemento DOM.

    $("#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 + '%');
            }
        });

Dejar respuesta

Please enter your comment!
Please enter your name here