fineuploader с общей панелью прогресса

Question

Я использую fineuploader для загрузки фотографий на мой сайт. я могу получить и обновить прогресс для каждого файла с,

.on('progress', function (event, id, filename, uploadedBytes, totalBytes) 

, но как я могу получить общий прогресс?

Answer 1

Посмотрев на документы (очень кратко), не похоже, что есть верный способ сделать это. Мое предложение состояло в том, чтобы подсчитать общее количество выбранных файлов и после того, как каждый файл будет успешно загружен, переместите индикатор выполнения X%.

<div class="tot_progress" style="width:500px;"> 
    <div class="bar" style="width:0; color:green;"></div> 
</div> 

.on('submitted', function(event, id, filename) { 
    filesToUpload++; 
}) 
.on('complete', function(event, id, fileName, responseJSON) {        
    uploadedFiles++; 
    prog_width = Math.floor(100/filesToUpload)*uploadedFiles; 
    $('.bar').css('width',prog_width+'%'); 
}) 

Например, предположим, что у нас было 4 файла для загрузки. После того, как первый файл завершит выполнение, индикатор выполнения покажет 25%, когда второй файл завершится, панель отобразит 50% ... Вы можете анимировать ширину, которая сделает ее более красивой.

Answer 2

Это не очень сложно сделать, и это намного лучше, чем просто увеличивать индикатор выполнения после завершения каждого файла. Вы должны использовать progress event, по большей части. На самом деле, я даже подробно описал how you can create your own aggregate progress bar in a blog post I wrote.

Например (из блога):

var perFileProgress = {}; 

$(element).fineUploader({ 
    ... 
    callbacks: { 
     onProgress: function(id, name, sent, total) { 
      perFileProgress[id] = [sent, total]; 
      updateTotalProgress(); 
     }, 

     onCancel: function(id) { 
      if (qq.supportedFeatures.progressBar) { 
       delete perFileProgress[id]; 
       updateTotalProgress(); 
      } 
     }, 

     onComplete: function(id, name, response) { 
      if (!response.success) { 
       delete perFileProgress[id]; 
       updateTotalProgress(); 
      } 
     } 
     ... 
    } 
}); 

function updateTotalProgress() { 
    var $container = $("#totalProgress"), 
     $bar = $container.find(".progress-bar"), 
     totalSent = 0, 
     totalSize = 0, 
     percentComplete = 0; 

    $.each(perFileProgress, function(fileId, progressData) { 
     totalSent += progressData[0]; 
     totalSize += progressData[1]; 
    }); 
    percentComplete = Math.round((totalSent/totalSize) * 100); 

    if (totalSent !== totalSize) { 
     $bar.css({ 
      width: percentComplete + "%" 
     }); 

     $container.removeClass("hide"); 
    } 
    else { 
     $container.addClass("hide"); 
    } 
} 

Примечание: Мой код выше предполагает, что вы используете загрузчик, но это, конечно, не требуется, и вы можете удалить зависимость от начальной загрузки довольно легко при желании ,

Answer 3

В качестве обновления к этому вопросу есть замечательный простой и эффективный способ сделать это сейчас. Документация на docs.fineuploader.com, а также можно получить обновления as a progress bar. Я также считаю, что этот текст приятно сочетать с Bootstrap's Progress Bar/Label functionality.

$(element).fineUploader({ 
... 
}) 
.on("totalProgress", function(event, totalUploadedBytes, totalBytes) { 
    var progressPercent = (totalUploadedBytes/totalBytes).toFixed(2); 
    if(isNaN(progressPercent)) { 
    $('#progress-text').text(''); 
    } else { 
    var progress = (progressPercent * 100).toFixed() + '%'; 

    $('#progress-text').text(progress); 
    } 
}); 

А вот соответствующий код для переднего конца привязывания для начальной загрузки:

<div id="progress-bar-container" class="qq-total-progress-bar-container-selector progress"> 
    <div id="progress-bar" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar progress-bar progress-bar-info progress-bar-striped active" role="progressbar"> 
    <span id="progress-text"></span> 
    </div> 
</div> 

Если вы хотите сохранить интеграцию Bootstrap ARIA/чтения с экрана, вы можете добавить крючки для этого, а также ,