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の動作中にページを更新するのを止めるにはどうすればよいですか？

どのようにこれら2つを達成できますか？

Answer 1

1）まずこの

好き UploadProgress機能に

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

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

3）次に

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

2）は、次にプログレスバーのCSSを追加するプログレスバーのHTMLを追加します

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