Как добавить индикатор выполнения в plupload?

Question

У меня есть следующий код: plupload

var uploader = new plupload.Uploader({ 
       runtimes : 'html4', 
       browse_button : 'pickfiles', // you can pass an id... 
       container: document.getElementById('container'), // ... or DOM Element itself 
       url : '<?php echo base_url();?>admin/video/post_video', 
       flash_swf_url : '../js/Moxie.swf', 
       silverlight_xap_url : '../js/Moxie.xap', 

       filters : { 
        max_file_size : '300mb', 
        mime_types: [ 
         {title : "Video files", extensions : "mp4,mov,3gp,flv,wmv"} 
        ] 
       }, 

       init: { 
        PostInit: function() { 
         document.getElementById('filelist').innerHTML = ''; 

         document.getElementById('uploadfiles').onclick = function() { 
          uploader.start(); 
          return false; 
         }; 
        }, 

        FilesAdded: function(up, files) { 
         plupload.each(files, function(file) { 
          document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>'; 
         }); 
        }, 

        UploadProgress: function(up, file) { 
         document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; 
         console.log((up.total.size-up.total.loaded)/up.total.bytesPerSec) 
        }, 

        Error: function(up, err) { 
         document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message)); 
        } 
       } 
      }); 
      uploader.init(); 

Теперь код работает отлично. Однако есть некоторые проблемы, которые я хочу исправить.

1. Файл в комплекте показывает только 0% и 100%. Промежуточный процент не равен 25% или 75%. т.е. процент постепенно увеличивается.
2. Я хочу добавить индикатор выполнения.
3. Как остановить обновление страницы во время работы plupload?

Как я могу достичь этих двух?

Answer 1

1) Сначала добавьте HTML для прогресса бара

<div id="myProgress"> 
    <div id="myBar"></div> 
</div> 

2) Затем добавить CSS для прогресса бара

#myProgress { 
    position: relative; 
    width: 100%; 
    height: 30px; 
    background-color: grey; 
} 

#myBar { 
    position: absolute; 
    width: 1%; 
    height: 100%; 
    background-color: green; 
} 

3) Тогда в UploadProgress функции сделать так

UploadProgress: function(up, file) { 
     document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; 
     $('#myBar').css('width', file.percent + '%');       
    },