javascript - attribute - replace html jquery

Progreso individual en la carga de archivos jQuery

Question

Me han recomendado usar la carga de archivos jQuery por blueimp.

Pero no consigo actualizar el progreso del archivo individual. Entiendo cómo funciona el progreso combinado (como se documenta)

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 carga única? ¿Cómo recupero el elemento DOM (barra de progreso) vinculado a esta carga en particular? Estaba pensando en crear una identificación por nombre de archivo y tamaño de archivo, pero como los usuarios pueden cargar el mismo archivo dos veces (a diferentes destinos), esto no funciona.

Esta es mi implementación en este 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 indicarme la documentación que no he podido encontrar?

Solución

Para identificar la carga, puede agregar parámetros adicionales al objeto de archivo cuando se agrega. el objeto de archivo permanece igual en el evento de progreso (pero no en el método realizado) Así que en fileuploadadd:

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

entonces cuando manejas el progreso:

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

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

        }

Answer 1

En php (de la versión 5.4 y superior) hay algo que se llama session upload progress . Le permite monitorear el progreso de carga en archivos individuales.

Puede ser bastante engorroso hacerlo funcionar, pero puede encontrar algunos ejemplos sobre cómo combinarlo con jquery en su solicitud XMLHttpRequest / Ajax cuando realiza una búsqueda en Google .

También se menciona aquí en la documentación del complemento de carga de archivos jquery

Answer 2

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

El objeto de datos proporciona una propiedad de contexto que puede establecer cuando agrega el archivo para vincular un elemento DOM a esa carga de archivo en particular. Esto se transfiere y está disponible en la devolución de llamada realizada y simplemente puede usarlo para afectar el progreso dentro del elemento DOM vinculado.

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

Answer 3

Según la documentación hay un solo evento de progreso :

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