Загрузить прогресс бар в JQuery

Question

Я пытаюсь сделать очень простую загрузку изображений скрипта с простой панелью загрузки, я прочитал некоторые учебники, и это то, что я стараюсь:

У меня есть прогресс бар

<div id="progressbar"> 
    <div class="bar" style="width: 50%;"></div> 
</div> 

С этим CSS стиль

.bar { 
    height: 18px; 
    background: green; 
} 

И мой сценарий JQuery

$.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); 
         $('#progressbar .bar').css('width',percentComplete + '%'); 
         if (percentComplete === 100) { 
         } 
        } 
       }, false); 
       return xhr; 
       }, 
       url:'upload.php', 
       type:'POST', 
       contentType:false, 
       data:data, 
       processData:false, 
       cache:false, 
       success: function(result) { 
       console.log(result); 
       } 
      }).done(function(msg){ 
       $("#cargados").hide().html(msg).fadeIn("fast"); 
      }); 

Часть, которая отправляет файлы в файл upload.php, отлично работает и показывает информацию в #cargados, но часть progressbar ничего не делает. Что я делаю неправильно?

Спасибо вам много ecazorla

Answer 1

Опция progressall это из JQuery Upload Plugin, следовательно, вы должны поставить progressall функцию обратного вызова в этой части кода:

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